使用 JavaScript 時，過多的事件觸發器可能會降低應用程式的速度。例如，使用者調整瀏覽器視窗大小或在搜尋列中輸入內容可能會導致事件在短時間內重複觸發，進而影響應用程式效能。

這就是節流和去抖可以發揮作用的地方。它們可以幫助您管理在處理過於頻繁觸發的事件時呼叫函數的頻率。

？什麼是節流？

限制限制函數的執行頻率。即使事件重複發生，受限函數也只會在每個指定的時間間隔內執行一次。

例：

想像您在一場音樂會上，並且正在拍照。但您決定每 5 分鐘只拍一張照片（無論表演有多精彩）。這就像節流一樣。無論發生多少值得拍照的時刻，您都會堅持每 5 分鐘拍一張照片的規則。

在 JavaScript 中，當您想要追蹤使用者向下捲動頁面的頻率，但您不希望該函數每毫秒觸發一次時，可以套用此功能。透過限制，您可以控制該函數的執行頻率。

代碼範例：

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

在此範例中，無論使用者滾動的速度有多快或多頻繁，handleScroll 函數只會每 2 秒（2000 毫秒）運行一次。

？什麼是去抖動？

去抖動確保函數僅在一段不活動時間後被呼叫。如果事件持續觸發，函數將不斷重置計時器，並且僅在事件停止後觸發。

例：

想像一下您正在群組聊天中，並且正在輸入一則訊息。您不想每次按下某個按鍵時都向您的朋友發送通知。相反，您需要等到停止輸入幾秒鐘後再發送「正在輸入...」通知。這就是去抖動——僅在打字暫停後發送通知。

在 JavaScript 中，當使用者在搜尋框中鍵入內容時，通常會使用去抖動。您可以等到使用者停止鍵入一段時間後再執行搜索，而不是在每次按鍵後發送搜尋查詢。

代碼範例：

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

在此範例中，handleInput 函數僅在使用者停止輸入 500 毫秒後執行。

？何時使用節流或去抖？

⚡️ 當您想要控制一段時間內呼叫函數的頻率時，請使用節流。適合以下活動：

=> 滾動
=> 調整視窗大小
=> 滑鼠移動

⚡️ 當您想要確保僅在事件完成觸發後呼叫函數時，請使用去抖動。適合以下活動：

=> 在搜尋欄輸入內容
=> 表單提交
=> 調整視窗大小（用於佈局調整等操作）

結論✅

限制和去抖動是提高 JavaScript 應用程式效能和回應能力的好技術。

它們幫助您管理執行功能的頻率，防止您的應用程式被太多事件淹沒。

透過了解何時以及如何使用它們，即使在最繁忙的應用程式中，您也可以保持程式碼平穩運行！

快樂編碼！ ？