css节流
众所周知,函数节流(throttle)是 JS 中一个非常常见的优化手段,可以有效避免函数过于频繁的执行。
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms
提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle
函数,或者直接引用lodash
工具库
btn.addEventListener('click', _.throttle(save, 300))
其实除了 JS 方式, CSS 也可以非常轻易实现这样一个功能,无需任何框架库,一起看看吧
CSS 实现思路分析
CSS 实现和 JS 的思维不同,需要从另一个角度去看待这个问题。
比如这里的需要对点击事件进行限制,也就是禁用点击事件,想想有什么方式可以禁用事件,没错,就是pointer-events
;
然后是时间的限制,每次点击后需要自动禁用300ms
,时间过后重新恢复,那么,有什么特性和时间以及状态恢复有关呢?没错,就是animation
;
除此之外,还需要有触发时机,这里是点击行为,所以必然和伪类:active
有关联。
<-- html -->
<button onclick="console.log('保存')">保存</button>
<-- html -->
<-- css部分 -->
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
注意,这里动画的缓动函数设置成了阶梯曲线,step-end
,它可以很方便控制pointer-events
的变化时间点。
pointer-events
在0~2秒内的值都是none
,一旦到达2秒,就立刻变成了all
,由于是forwards
,会一直保持all
的状态。.
css节流的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 简述JavaScript函数节流
为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...
- JS 节流
作为前端的小白,在做项目的过程中,一般只考虑到实现功能,并没有考虑到性能的问题. 比如说,下拉加载更多的这个功能和resize()是特别耗费性能的.此时就要想到节流了. 节流:就是然一个函数无法在短时 ...
- 重构:CSS也面向对象
最初接触到面向对象的CSS还是因为项目中的CSS已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构.在前端重构中,我们已经讨论过了JavaScript面向对象的重构,在这个时 ...
- 结构-行为-样式-Js函数节流
最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...
- js整频滚动展示效果(函数节流鼠标滚轮事件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 图片首尾平滑轮播(JS原生方法—节流)<原创>
首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang=" ...
- JS奇淫巧技:防抖函数与节流函数
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...
- js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- Python开发的常用组件
1. 生成6位数字随机验证码 import random import string def num_code(length=6): """ 生成长度为length的数字 ...
- Unity-WebGL基于JS实现网页录音
因为该死的Unity不支持WebGL的麦克风,所以只能向网页借力,用网页原生的navigator.getUserMedia录音,然后传音频流给Unity进行转AudioClip播放. 还有一点非常重要 ...
- 使用VMware Converter Standalone P2V(物理机转换虚拟机)
使用VMware Converter Standalone P2V(物理机转换虚拟机) 环境说明: 1.P2V软件:VMware-converter-en-6.3.0-20575345 下载地址:v ...
- 《Terraform 101 从入门到实践》 Terraform在公有云GCP上的应用
<Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. Terraform支持的公有 ...
- 视觉十四讲:第六讲_ceres非线性优化
使用Ceres求解非线性优化问题,一共分为三个部分: 1. 第一部分:构建cost fuction,即代价函数,也就是寻优的目标式.这个部分需要使用仿函数(functor)这一技巧来实现,做法是定义一 ...
- 《价值流动-Project To Product》读后感
背景:2022年8月,在这家公司已经任职满两年.这两年我最大的成就就是基于Scrum模式推行了敏捷项目管理,并取得了一定的成果.但是,在推行了两年后新的问题也产生了.例如: 1,项目管理上,项目经理缺 ...
- Postman操作指南
基本使用 基本使用在这里不做记录,大多数人下载完就会用.这里记一下重点. 抓包浏览器 浏览器安装插件postman interceptor:插件在postman-interceptor界面最下面提示的 ...
- 微信小程序的全局弹窗以及全局实例
全局组件 微信小程序组件关系中,父组件使用子组件需要在父组件index.json中引入子组件,然后在父组件页面中使用,这种组件的对应状态是一对一的,一个组件对应一个页面.如果有一个全局弹窗(登录),那 ...
- 这些 JavaScript 笔试题你能答对几道?
收藏 javascript-questions 这个仓库很久了,趁着周末来锻炼下自己的 JS 基础水平 因为逐渐也在承担一些面试工作,顺便摘录一些个人觉得比较适合面试的题目和方向 事件流(捕获.冒泡) ...
- 跳板攻击之:Netsh端口代理转发
跳板攻击之:Netsh端口代理转发 目录 跳板攻击之:Netsh端口代理转发 1 命令解析 2 代理转发内网22端口 3 代理转发外网4444端口 4 注意 1 命令解析 netsh interfac ...