在JavaScript中理解防抖（debounce）和节流（throttle）的魅力：提升应用程序性能的秘密武器

2024-01-03 18:13:42

JavaScript中的防抖和节流：性能优化双雄

在现代网络应用开发的舞台上，JavaScript扮演着不可或缺的角色，它赋予网页交互性、灵活性，提升用户体验。然而，随着应用程序日益复杂，事件密集型操作层出不穷，性能优化成为开发者的当务之急。防抖和节流作为JavaScript中的两大性能优化利器，应运而生。

防抖（debounce）：防止函数频繁执行

防抖，顾名思义，就是让函数在一定时间内只执行一次。当事件在短时间内频繁触发时，防抖会抑制函数的多次执行，仅在事件停止触发后的一段时间内执行一次。这样，可以有效防止函数的过度调用，避免不必要的性能开销。

防抖的典型应用场景包括：

输入框中的搜索建议：在用户输入时，防抖可以防止搜索建议频繁刷新，提高用户体验，避免服务器压力过大。
滚动事件中的页面加载：在用户滚动页面时，防抖可以防止页面内容频繁加载，提高滚动性能，避免卡顿。
窗口调整事件中的布局重排：在用户调整窗口大小时，防抖可以防止浏览器频繁重排布局，提高窗口调整性能。

节流（throttle）：限制函数执行频率

节流，与防抖相似，但又略有不同。节流的主要作用是限制函数在一定时间内最多执行一次。即使事件在短时间内频繁触发，节流也会确保函数在设定的时间间隔内只执行一次。这样，可以有效控制函数的执行频率，防止函数过度消耗资源。

节流的典型应用场景包括：

鼠标移动事件中的页面滚动：在用户移动鼠标时，节流可以防止页面频繁滚动，提高滚动性能，避免卡顿。
键盘事件中的表单验证：在用户输入表单时，节流可以防止表单验证频繁触发，提高表单验证性能，避免不必要的服务器请求。
动画事件中的帧刷新：在动画播放时，节流可以防止动画帧过快刷新，降低GPU压力，提高动画性能。

JavaScript防抖和节流的实现方式

防抖的实现

防抖的实现方式有两种：

基于定时器的防抖：

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

基于时间戳的防抖：

function debounce(func, wait) {
  let previous = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now;
    }
  };
}

节流的实现

节流的实现方式有两种：

基于定时器的节流：

function throttle(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

基于时间戳的节流：

function throttle(func, wait) {
  let previous = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now;
    }
  };
}