防抖和节流的区别和实用场景

防抖和节流

防抖：单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。触发高频事件，n秒内事件只会执行一次，如果n秒内再次触发，则会重新计算时间

防抖的实用场景：

• 登录发短信按钮，避免用户多次点击发起多次请求
• 调整浏览器大小 resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存
• 联想输入法，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。
  举例：

节流：顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null

节流的实用场景

• scroll 事件，每隔一秒计算一次位置信息等
• 浏览器播放事件，每隔一秒计算一次进度信息等
• input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)
  举例：

    
        
        
        
    
    
        点击count++
        0
    

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

总结：

 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
 节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null