众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效避免函数过于频繁的执行。
举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库
其实除了 JS 方式， CSS 也可以非常轻易实现这样一个功能，无需任何框架库，一起看看吧
CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。
比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是pointer-events;
然后是时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，那么，有什么特性和时间以及状态恢复有关呢？没错，就是animation;
除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类:active有关联。
因此，综合分析，实现这样一个功能需要用到pointer-events、animation以及:active，那么如何将这些思路串联起来呢？
其实这种场景可以理解成是对 CSS 动画的控制，比如有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，是不是就达到了“节流”的效果了？
接下来看看具体实现
完整代码如下，就这么几行，如果需要改限制时间，直接改动画时间就行了
