节流和防抖_牛客博客

节流连续触发的事件每隔一段时间执行。
防抖连续触发的事件只执行一次,事件停下一段时间后才能继续触发下一次。

使用场景：

节流：可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。
防抖：一般可以使用在用户输入停止一段时间过后再去获取数据，而不是每次输入都去获取。

节流函数定时函数版

function throttle(fn, delay) {
  let timer = null;
  return function(){
    if(timer) return
    setTimeout(()=>{
      fn.call(this, arguments);
      timer = null;
    }, delay)
  }
}

div.addEventListener('drag', throttle(function(e){console.log(e.offsetX)},200))

防抖函数

- function debounce(fn,delay) {
-   let timer = null;
-   return function() {
-     if(timer) {
-        clearTimeout(timer);
-     }
-     setTimeout(()=>{
-      fn.call(this, arguments);
-       timer = null;
-     }, delay)
-   }
- }

https://www.jianshu.com/p/c8b86b09daf0