函数的防抖和节流

防抖（debounce）

什么是防抖？

• 一个函数被触发n秒后，才执行此函数
• 如果n秒内再次触发此函数，那么重新以再次触发的时间开始重新延迟 n 秒后执行此函数

这样的函数 执行行为 叫做函数防抖。

应用场景

• 监听设备窗口大小发生改变，只有停止改变后的200ms执行handleResize方法

  window.addEventListener("resize", debounce(handleResize, 200));
  

• 监听表单填写，表达内容改变都去请求服务端数据，在每次表单执行输入停止的500ms后，才发起请求

  input.addEventListener("change", debounce(handleRequest, 500));
  

代码实现

function debounce(event, delay) {
  let timer = null;
  return function (...args) {
    // ...args用来接受fun原有的参数，比如事件就是event对象
    clearTimeout(timer); // 利用clearTimeout的特性，处理delay内，再此触发函数不做处理
    timer = setTimeout(() => {
      event.apply(this, args);
    }, delay);
  };
}

节流（throttle）

什么是节流？

• 单位时间内多次触发函数，函数只进行一次执行
• 如果在这个单位时间内，多余的触发，全部不做处理。使函数按照规定的速率执行

这样的函数 执行行为 叫做函数节流。

应用场景

• 滚动事件，持续滚动，间隔200ms执行

  dom.addEventListener("scroll", throttle(handleScroll, 200));
  

• 鼠标滑动事件，一秒钟大概可以执行60次。使用节流函数优化，200ms执行一次。如果不做节流处理，可想而知浏览器压力有多大

  dom.addEventListener("mousemove", throttle(handleMove, 200));
  

代码实现

function throttle(fun, delay) {
  let prev = Date.now();
  return function (...args) {
    // ...args用来接受fun原有的参数，比如事件就是event对象
    let now = Date.now();
    if (now - prev >= delay) {
      fun.apply(this, args);
      prev = Date.now();
    }
  };
}