JavaScript 中的防抖與節流：簡單明瞭的前端解析

什麼是防抖（Debounce）？

防抖是一種確保函數在特定的等待時間後才執行的技術。更精確地說，它會在最後一次事件觸發後的指定時間內才執行函數，如果在這段等待時間內又有新的事件觸發，則重新計時。

防抖的工作原理

想像一下電梯的運作方式：當有人按下電梯按鈕後，電梯門會在等待一段時間後關閉。但如果在這段等待時間內又有人進入電梯或按下按鈕，電梯會重新計時，再次等待一段時間才關門。防抖的原理與此類似，它會等待直到「安靜期」才執行函數。

防抖的實際應用場景

防抖技術特別適用於以下場景：

• 搜尋框輸入：當用戶在搜尋框中輸入時，我們不希望每輸入一個字符就發送一次請求，而是希望用戶停止輸入後才發送請求。
• 視窗調整大小：當用戶調整瀏覽器視窗大小時，我們可能需要重新計算佈局，但不希望在調整過程中頻繁計算，而是希望在用戶完成調整後再執行一次。
• 表單提交：防止用戶在短時間內多次點擊提交按鈕，導致多次表單提交。
• 按鈕點擊：防止用戶連續快速點擊按鈕，導致函數被多次執行。

防抖的實現方式

以下是一個簡單的防抖函數實現：

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const searchInput = document.getElementById("search");
const fetchResults = debounce(() => console.log("獲取搜尋結果..."), 300);

searchInput.addEventListener("input", fetchResults);
            

在這個例子中，我們創建了一個防抖函數，它接受兩個參數：要執行的函數和延遲時間。當用戶在搜尋框中輸入時，只有在用戶停止輸入 300 毫秒後，才會執行 fetchResults 函數。

什麼是節流（Throttle）？

節流是一種限制函數在特定時間段內執行頻率的技術。換句話說，無論事件觸發多少次，函數在指定的時間段內只會執行一次。

節流的工作原理

想像一下水龍頭的流水：不論你如何用力擰開水龍頭，水流的速度都有一個上限，這就是節流的原理。在編程中，節流確保函數在一段時間內最多執行一次，即使事件在這段時間內被多次觸發。

節流的實際應用場景

節流技術特別適用於以下場景：

• 滾動事件：當用戶滾動頁面時，可能會頻繁觸發滾動事件，使用節流可以限制處理函數的執行頻率。
• 遊戲中的按鍵操作：在遊戲中，我們可能希望限制玩家的操作頻率，避免玩家通過快速連點獲得優勢。
• 圖表重繪：當數據頻繁更新時，我們可能希望限制圖表重繪的頻率，以避免性能問題。
• 拖拽事件：當用戶拖拽元素時，可能會觸發大量的 mousemove 事件，使用節流可以減少處理函數的呼叫次數。

節流的實現方式

以下是一個簡單的節流函數實現：

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

const scrollHandler = throttle(() => console.log("處理滾動事件..."), 500);

window.addEventListener("scroll", scrollHandler);
            

在這個例子中，我們創建了一個節流函數，它接受兩個參數：要執行的函數和時間限制。當用戶滾動頁面時，處理函數最多每 500 毫秒執行一次，無論滾動事件在這段時間內被觸發多少次。

防抖與節流的比較

主要區別

雖然防抖和節流都用於控制函數的執行頻率，但它們的實現方式和適用場景有明顯的不同：

• 防抖（Debounce）：函數在最後一次事件觸發後的指定時間內執行，如果在這段時間內又有新的事件觸發，則重新計時。適合「等待直到操作完成」的場景。
• 節流（Throttle）：函數在指定的時間段內最多執行一次，無論事件在這段時間內被觸發多少次。適合「限制執行頻率」的場景。

使用場景比較

以下表格詳細比較了防抖和節流在不同場景下的適用性：

注：✓ 表示非常適合，△ 表示可用但不是最佳選擇，✗ 表示不適合。