这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

防抖和节流函数学习笔记

防抖和节流是两种用于通过限制某个特定任务触发的频率来提高Web应用程序性能的方法。 防抖限制函数触发的频率，而节流限制函数调用的频率。 在两种情况下，只有在触发频率稳定后，任务才会被执行。

防抖函数

防抖的本质是触发高频事件后 n 秒内函数只会执行一次，也就是说，在触发高频事件后，函数将在 n 秒内只会被执行一次，如果 n 秒内高频事件再次被触发，则会重新计算延时执行的时间，相当于每次触发事件时都取消之前的延时调用方法。这样做的目的是为了对高频事件进行函数节流，防止不必要的计算执行，从而提高系统性能。

除此之外还有一些很典型的例子如：

在支付界面中，可以使用防抖函数来防止用户重复提交支付请求，从而避免重复支付，提高支付体验。此外，还可以使用防抖函数来过滤搜索框的文字输入，从而避免用户在输入的时候过于频繁的发出请求，提高搜索体验。

代码实现

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

节流函数

节流的本质是控制函数的执行频率，在规定的时间内只能触发一次函数，如果在规定的时间内多次触发函数，函数只会执行一次，而在规定的时间后触发的函数只会在上一次执行完毕后才会被执行。这样做的目的是避免函数的高频调用，提高系统的性能。

典型的节流函数的使用场景包括：在滚动条滚动的过程中，可以使用节流函数控制DOM的更新频率，从而提高性能；在鼠标移动过程中，可以使用节流函数控制实时响应的频率，从而提高用户体验。

代码实现

function throttle(fn, time) {
  let timer = null;
  let lastTime = null;
  return function () {
    let nowTime = +new Date();
    // 如果定时器存在，表示时间间隔未到，不执行
    if (timer) {
      return;
    }
    // 如果定时器不存在，表示第一次调用，则直接执行
    if (!lastTime || nowTime - lastTime > time) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    } else {
      // 如果定时器不存在，并且时间间隔小于设定的时间，则设置定时器，等待时间到达
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        lastTime = nowTime;
        clearTimeout(timer);
        timer = null;
      }, time);
    }
  };
}

当处理昂贵的操作或响应用户输入事件（例如滚动或调整窗口大小）时，此技术特别有用。 防抖和节流可以用于防止组件的不必要重新渲染，或限制发送到API的网络请求的数量，从而提高Web应用程序的整体性能。 此外，它们可以帮助确保用户界面对用户输入保持响应，而不会被过多的请求所淹没。