防抖（debounce）与节流（throttle）在 JavaScript 中的性能优化 | 青训营

1. 概念理解

防抖（debounce）和节流（throttle）是两种在前端开发中常用的性能优化技术。它们的主要目的是控制函数的执行频率，避免函数在短时间内被频繁触发，从而提高程序的性能。

1.1 防抖（debounce）

防抖的主要思想是在函数触发后，先取消之前设置的等待执行的定时器，然后重新设置一个新的定时器，在指定的延迟时间后执行函数。这样可以保证在连续触发的情况下，函数只会在最后一次触发后的延迟时间到达时执行一次。

1.2 节流（throttle）

节流的主要思想是在函数触发时，检查距离上次触发的时间间隔，如果时间间隔小于设定的阈值，则不执行函数；如果时间间隔大于等于阈值，则执行函数并重新设置时间间隔。这样可以保证在短时间内频繁触发的情况下，函数的执行频率不会超过设定的阈值。

2. 防抖与节流的应用场景

防抖和节流在很多场景下都可以提高程序的性能，例如：

• 搜索框输入时的自动搜索功能
• 窗口大小调整事件
• 滚动事件
• 图片懒加载
• 视频播放器

3. 防抖与节流的实现

3.1 防抖的实现

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

3.2 节流的实现

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

4. 防抖与节流的意义

防抖和节流在实际应用中可以有效地提高程序的性能。例如，在搜索框输入时的自动搜索功能中，使用防抖可以避免在用户输入过程中频繁地触发搜索函数，从而提高搜索的效率。在图片懒加载中，使用节流可以控制图片加载的速度，避免因为图片加载过多而导致的性能下降。

5. 结语

防抖和节流是前端开发中常用的性能优化技术，通过控制函数的执行频率，可以有效地提高程序的性能。在实际开发中，我们需要根据具体的场景选择合适的优化技术，以达到最佳的性能效果。