秒懂前端防抖和节流(无需代码)

有同学私信驼峰老师，问前端技术里面，无论是vue，react框架里面，都有介绍防抖和节流的技术，但是总是似懂非懂。防抖好像可以降低Double Click的概率，节流好像也可以降低Double Click的概率，那防抖和节流到底有什么区别。

今天驼峰老师就尝试说明一下防抖（debounce）和节流（throttle）的区别，保证你一听就懂，懂了的同学可以收藏点赞。

举例子：

假设驼峰老师在网页上做了一个input输入框，然后定义了一个键盘的keyup事件E，当我逐个输入abcdefg......字母的时候，就会触发事件E。

当我没有使用防抖或者节流技术的时候，我输入的快，事件E就被触发的快，我输入的慢，事件E就被触发的慢，但是触发的总次数永远等于我输入字母的次数。到这边为止应该理解都没有问题。

加入500毫秒的防抖：

当我在第0毫秒输入a，然后抬手（抬手不耗时）且后续不再输入的时候，会预约一个500毫米后的事件E，也就是事件E会在我输入a键盘抬手后的500毫秒被触发，而不是立即触发。

当我在第0毫秒输入a抬手，然后在第10毫秒输入b然后抬手，后续不再输入的时候，事件E会在我输入b抬手后的500毫秒被触发（也就是第510毫秒），而输入a抬手所预约的事件E被输入b给取消了，而输入b抬手重新预约了一个500毫秒后的事件E。从结果上来讲，虽然你输入了两个字母，但是事件E只会被触发一次，而触发的时间会在你最后一个字母输入之后的500毫秒。这样就达到了即便你手抖连续很短的时间内多点了某些控件，事件E也不会被触发多次的效果。

加入500毫秒的节流：

当我在第0毫秒输入a且后续不再输入的时候，同样会预约一个500毫秒后的事件E，事件E会在我输入a键盘抬手后的500毫秒被触发，而不是立即触发。只输入一个字母的这个情况和防抖效果是一样的。

但当我在第0毫秒输入a抬手（抬手不耗时），然后在第10毫秒输入b然后抬手，后续不再输入的时候，事件E会在第500毫秒被触发。也就是说事件E在输入a的时候就已经被预约了500毫秒后被执行，在500毫秒内输入其他字母并不会重新预约事件E的触发时间。

有了以上的知识，通过极端场景来彻底理解防抖和节流。

假设驼峰老师可以永远不吃不喝，每隔10毫秒输入一个字母，并且永不停止。

1. 500毫秒的防抖的效果就是：永远不会触发事件E。原因是每当我输入一个新字母，我就覆盖了原来预约500毫秒后执行的事件E。由于我不会停止输入，所以事件E永远被预约在500毫米之后。
2. 500毫秒的节流的效果就是：每隔500毫米事件E就会被触发一次。也就是第500毫秒，事件E就准时被执行一次，第1000毫秒，事件E就准时被执行一次，第1500毫秒，事件E就准时被执行一次。

通过极端场景，是不是立马就理解了防抖和节流的区别了。

驼峰老师非常喜欢玩魂斗罗，放到魂斗罗中按着连发键来发子弹举例子。

如果魂斗罗的程序员把连发键做成1秒防抖，那么你按着连发键盘不放，永远发不出子弹，直到你放手了连发键后，1秒后子弹终于出来了一颗。

如果魂斗罗的程序员把连发键做成1秒节流，那么你按着连发键盘不放，子弹会按照1秒发一颗的规律发出来。

总结：

防抖和节流都可以防止在短时间内频繁触发某事件，因为我们不希望某事件在短时间内频繁被触发（通常处于性能考量和安全考虑）。有了以上知识，结合具体需求，就可以选择性地知道用防抖比较好，还是节流比较好。

大家有什么场景或者疑问，欢迎可以和驼峰老师一起探讨哦。