混互联网，什么是防抖？什么是节流？他们有什么区别？

大家好，欢迎来到IT知识分享网。

防抖，从字面就可以知道，就是防止抖动。避免一次操作造成多次事件响应操作。最常见的就是我们每次敲击键盘，这就是触发防抖的操作。

便于理解，以下列举了一些应用的场景。

1. 抢购，短信验证等操作，本身在后台有排队和转发延迟。这样就需要控制用户频繁点击按钮，导致多次请求。这个需要防抖。
2. 输入框输入，在用户输入停止几秒后再去获取输入信息，而不是每次输入都去获取。
3. 自动保存，在文档编辑，每隔几秒进行一次自动保存操作。

如下图的代码片断，重点「防抖清零 clearTimeout(timer)」

防抖

节流，指的是控制流量。控制事情发生的频次，比如为5s一次。与服务端(Server)和网关(Gateway)的限流 (Rate Limit) 类似。

以下的应用场景，就使用到了限流。

1. 元素滚动(onscroll)事件，每隔几毫秒计算一次位置信息。
2. 播放器播放信息，每隔几十秒计算一次进度信息。
3. 商品预览图的放大镜效果时，不需要每次鼠标移动都计算位置。

代码片段如下，重点「节流开关锁 timer=null」

节流

整个说来：

防抖：将几次操作合并为一次操作进行。原理是维护一个计时器，在规定的时间后触发函数，如果在单位时间内事件触发会被重置，取消之前的计时器而重新设置，避免事件误触。

节流：控制在单位时间内只有效触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 节流事件不管触发有多频繁，保证在规定时间内只一次有效事件处理;而防抖只在最后一次事件后才触发一次函数。

防抖节流区别图示

所以，防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。