还在用 JS 做节流吗？CSS 也可以防止按钮重复点击

本文正在参加「金石计划 . 瓜分6万现金大奖」。

欢迎关注我的公众号：前端侦探

众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。

举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库

btn.addEventListener('click', _.throttle(save, 300))
复制代码

其实除了 JS 方式， CSS 也可以非常轻易的实现这样一个功能，无需任何框架库，一起看看吧

一、CSS 实现思路分析

CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。

比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是pointer-events;

然后是时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，那么，有什么特性和时间以及状态恢复有关呢？没错，就是animation;

除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类:active有关联。

因此，综合分析，实现这样一个功能需要用到pointer-events、animation以及:active，那么如何将这些思路串联起来呢？

思考3秒...