JavaScript防抖與節流如何提高響應速度

在 JavaScript 中，防抖（debounce）和節流（throttle）是兩種常用的優化高頻率觸發事件的技術。它們都能提高響應速度，但實現方式和應用場景略有不同。

防抖（debounce）：

防抖的核心思想是在一定時間內，事件被連續觸發時，只執行最后一次觸發的事件處理函數。適用于如輸入框實時搜索、窗口大小調整等場景。

實現方式：

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

節流（throttle）：

節流的核心思想是在一定時間內，事件被連續觸發時，只執行一次事件處理函數。適用于如滾動加載、鼠標移動等場景。

實現方式：

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

如何提高響應速度：

1. 減少事件處理函數的執行時間：通過優化代碼邏輯、減少不必要的計算，提高事件處理函數的執行效率。

2. 使用防抖或節流技術：在高頻率觸發事件的情況下，使用防抖或節流技術可以減少事件處理函數的執行次數，從而提高響應速度。

3. 避免不必要的 DOM 操作：在處理與 DOM 相關的事件時，盡量減少不必要的 DOM 操作，例如避免頻繁的樣式修改、元素增刪等。

4. 使用 requestAnimationFrame：在進行動畫或需要實時更新的場景中，使用 requestAnimationFrame 可以讓瀏覽器在下一次重繪之前執行指定的回調函數，從而提高渲染性能。