众所周知,函数节流(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
的状态。.
标签:throttle,节流,JS,点击,CSS,pointer,events,css From: https://www.cnblogs.com/chailuG/p/17108410.html