关于节流和防抖

一、防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。（防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。）👉参考资料

1. 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。
2. 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟。
3. 应用场景：

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求；
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位；
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存。
  
  
  ***防抖重在清零 ***
  二、节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。（避免用户不必要的请求，减少网络阻塞，控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁timer=timeout; timer=null。）👉参考资料
  
  

1. 实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return。
2. 应用场景：

• scroll 事件，每隔一秒计算一次位置信息等
• 浏览器播放事件，每个一秒计算一次进度信息等
• input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)
  
  
  节流重在开关锁
  三、总结：

1. 函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
2. 函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。
3. 区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
   —— 全文摘自简书《节流和防抖的区别，以及如何实现》（作者：LenHong）以及知乎《什么是防抖和节流，他们的应用场景是哪里》（作者：山月）
   视频资料来自B站（作者：蛋老师）