1、节流原理
如果持续触发事件，每隔一段时间只执行一次函数。意思就是针对调用频率高的函数，通过设置延时，使其在执行后间隔一段时间，才允许进行下一次的函数运行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。之前基本上是使用JavaScript节流函数去控制，实际上css也能做到节流。以下将以按钮的点击事件来举例。
2、css 实现思路
（需要用到 pointer-events、animation以及:active） 对点击事件进行限制：通过CSS pointer-events 属性，点击一次之后一定时间内禁用触发点击事件；
- pointer-events 属性用于设置元素是否对鼠标事件做出反应。
- css语法：pointer-events: auto|none;
- 设置禁止时间：通过animation
- 设置动画时间（点击事件禁用时间）
- 触发时机：通过伪类:active触发animation的动画
可以理解成是对 CSS 动画的进行控制，比如有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，借此达到“节流”的效果。
3、实现代码
在button按钮上绑定点击事件
|
1 2 3 4 5 |
<button @click="buttonClick">保存</button>
buttonClick() { console.log("节流-----保存"); }, |
设置css animation动画效果，并绑定到button上
|
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes throttle { from { pointer-events: none; } to { pointer-events: all; } } button { animation: throttle 2s step-end forwards; } |
注意：这里动画的缓动函数设置成了阶梯曲线 step-end，step-end 会使 keyframes 动画到了定义的关键帧处直接突变，并没有变化的过程，用来达到 pointer-events 的明显变化时间点。
pointer-events在0~2秒内的值都是none，一旦到达2秒，就立刻变成了all，由于是forwards，会一直保持all的状态。
在点击时重新执行一遍动画，只需要在按下时设置动画为none就行了
|
1 2 3 |
button:active{ animation: none; } |
为了更直观的看到节流效果，可以把颜色变化也加在动画里
|
1 2 3 4 5 6 7 8 9 10 |
@keyframes throttle { from { color: red; pointer-events: none; } to { color: green; pointer-events: all; } } |
4、借助 CSS 来监听事件
webkit-animation动画有三个事件：
- 开始事件: webkitAnimationStart
- 结束事件: webkitAnimationEnd
- 重复运动事件: webkitAnimationIteration
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var o = document.getElementById("div1"); // 动画开始时事件 o.addEventListener("webkitAnimationStart", function() { console.log("动画开始"); }) // 动画重复运动时事件 o.addEventListener("webkitAnimationIteration", function() { console.log("动画重复运动"); }) // 动画结束时事件 o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); }) |
在本示例中，可以通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态，实现如下
|
1 2 |
<button onclick="console.log('保存1')">测试click</button> <button class="throttle" onclick="console.log('保存2')">节流----css</button> |
|
1 2 3 4 5 6 7 8 9 10 11 |
button { user-select: none; } .throttle { opacity: 0.99; transition: opacity 2s; } .throttle:not(:disabled):active { opacity: 1; transition: 0s; } |
然后监听transition的起始回调
|
1 2 3 4 5 6 |
document.addEventListener("transitionstart", function (ev) { ev.target.disabled = true; }); document.addEventListener("transitionend", function (ev) { ev.target.disabled = false; }); |
这样做的最大好处是，这部分禁用的逻辑是完全和业务逻辑是解耦的，可以在任意时候，任意场合下无缝接入，也不受框架和环境影响。
5、总结
以上通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
- 函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行；
- CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性；
- CSS 实现“节流”其实就是对一个动画的进行精准控制；
- 还可以通过 transition 属性的回调函数动态设置按钮禁用态；
- 这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的。
