JavaScript防抖與節流怎樣減少請求次數

在 JavaScript 中，防抖（debounce）和節流（throttle）是兩種常用的優化高頻率觸發事件的技術，它們都可以用來減少請求次數。

1. 防抖（debounce）： 防抖的基本原理是在一定時間內，無論觸發多少次事件，都只執行一次指定的函數。當事件停止觸發后，才會再次執行。適用于如輸入框實時搜索、窗口大小調整等場景。

實現方法：

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

使用示例：

const searchInput = document.querySelector('#search-input');
const fetchData = () => { /* 請求數據的操作 */ };

const debouncedFetchData = debounce(fetchData, 500);
searchInput.addEventListener('input', debouncedFetchData);

2. 節流（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;
    }
  };
}

使用示例：

const scrollContainer = document.querySelector('#scroll-container');
const loadData = () => { /* 請求數據的操作 */ };

const throttledLoadData = throttle(loadData, 200);
scrollContainer.addEventListener('scroll', throttledLoadData);

通過這兩種技術，我們可以有效地減少高頻率觸發事件的請求次數，提高程序的性能。