从防抖到节流，深入浅出理解两种函数节流技术

2023-12-04 01:54:17

在前端开发中，我们经常会遇到需要对事件进行节流或防抖的情况。例如，当用户在输入框中输入文字时，我们不希望每输入一个字符就触发一次搜索请求，而是希望等到用户输入完毕后再触发。又或者，当用户滚动页面时，我们不希望滚动条每移动一像素就触发一次滚动事件，而是希望等到用户滚动一段时间后再触发。这些场景中，我们就需要用到防抖或节流技术。

防抖

防抖的原理是，当一个事件在单位时间内被触发多次时，只执行一次该事件的处理函数。防抖的目的是为了避免函数被多次触发，从而提高性能和用户体验。

实现防抖的方法有多种，最简单的方法是使用 JavaScript 的 setTimeout() 函数。例如，我们可以使用以下代码实现防抖：

const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func(...args);
      timer = null;
    }, delay);
  };
};

这段代码定义了一个 debounce() 函数，它接收两个参数：要防抖的函数 func 和防抖的延迟时间 delay。当 func 函数被调用时，debounce() 函数会创建一个计时器。如果在计时器到期之前 func 函数再次被调用，计时器会被重置。这意味着 func 函数只会在计时器到期后才被执行一次。

节流

节流的原理是，当一个事件在单位时间内被触发多次时，只执行一次该事件的处理函数。与防抖不同，节流并不会阻止函数的执行，而是限制其执行的频率。节流的目的是为了避免函数被过度触发，从而提高性能和用户体验。

实现节流的方法有多种，最简单的方法是使用 JavaScript 的 throttle() 函数。例如，我们可以使用以下代码实现节流：

const throttle = (func, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime < delay) {
      return;
    }
    lastCallTime = now;
    func(...args);
  };
};

这段代码定义了一个 throttle() 函数，它接收两个参数：要节流的函数 func 和节流的延迟时间 delay。当 func 函数被调用时，throttle() 函数会检查当前时间与上一次调用 func 函数的时间差。如果时间差小于 delay，则 func 函数不会被执行。否则，throttle() 函数会记录当前时间并执行 func 函数。