JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

JavaScript性能优化之函数节流与函数去抖

函数节流（throttle）和函数去抖（debounce）都是 JavaScript 中常用的性能优化技巧。它们都是用来解决频繁触发回调函数导致过多计算使页面出现卡顿或资源浪费的问题。

函数节流 throttle

函数节流的基本思路是：在一定时间间隔内，只执行一次函数。通过这种方式，可以减少计算次数，提升性能。一般适用于 window.resize，scroll 等事件。

实现原理

函数节流的实现原理是不断地记录当前是否已经有延时函数在等待执行。如果有，则不再继续触发新的延时函数；如果没有，则新建一个延时函数并交给 setTimeout 执行。

代码示例

下面给出一个简单的函数节流代码示例：

function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null; // 注意重置定时器
      }, delay);
    }
  };
}

// 用法示例
window.addEventListener(
  "resize",
  throttle(() => {
    console.log("resize event occured");
  }, 100)
);

在上面的示例中，我们定义了一个 throttle 函数，接受一个回调函数 fn 和一个时间间隔 delay。在 throttle 内部，维护了一个 timer 变量用来记录是否已经有计时器在等待执行。在回调函数被触发时，我们首先判断 timer 是否已存在。如果不存在，说明没有计时器等待执行，我们就新建一个计时器并将其赋值给 timer。通过 setTimeout 函数，我们让延时执行回调函数，并在执行后重置 timer。这样就可以实现函数节流的效果了。

函数去抖 debounce

函数去抖的原理与函数节流相似，但在实现上略有不同：函数去抖是在一定时间段内，只有最后一次触发事件才会执行相应的回调函数。一般适用于搜索框等需求，防止用户输入速度过快导致频繁触发请求。

实现原理

去抖函数的实现原理实际上就是不停地清除之前设置的计时器，并新建一个计时器等待下一次事件触发。只有在最后一次事件触发时，才会执行回调函数。

代码示例

下面给出一个简单的函数去抖代码示例：

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer); // 如果计时器还在等待中，则清除计时器
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

// 用法示例
const searchBox = document.getElementById("search-box");
searchBox.addEventListener(
  "input",
  debounce(() => {
      console.log("search box content changed");
  }, 500)
);

在上面的代码示例中，我们定义了一个 debounce 函数，接受一个回调函数 fn 和一个时间间隔 delay。在 debounce 内部，维护了一个 timer 变量用来记录是否已经创建计时器。在回调函数被触发时，我们首先判断 timer 是否已存在。如果存在，说明上一次事件触发后还存在等待执行的计时器，我们就需要先清除计时器。通过 setTimeout 函数，我们让计时器开始等待，并在执行后重置 timer。这样，只有最后一次事件触发时，才会执行回调函数。

总结

函数节流和函数去抖是 JavaScript 常用的性能优化技巧，常用于优化频繁触发的事件处理。函数节流和函数去抖有一些相似之处，但在实现上还是有一定的区别的。对于不同的场景，我们可以选择合适的技巧来优化我们的代码，提高性能。