Web 開發中的節流與去抖動-js教程-PHP中文網

Web 開發中的節流與去抖動

Susan Sarandon

發布： 2024-11-01 17:14:30

原創

661 人瀏覽過

Throttling and Debouncing in Web Development

滾動、調整大小或鍵入等事件經常會重複觸發功能，有時在幾秒鐘內觸發數百次。想像一下，當使用者鍵入時，搜尋列會從伺服器取得建議，或是當瀏覽器視窗變更時，調整大小處理程序會不斷調整佈局。如果不加以控制，這些功能可能會使瀏覽器過載，降低使用者體驗，甚至會因過多的 API 請求而增加伺服器成本。

這就是節流和去抖發揮作用的地方。這兩種技術有助於管理響應頻繁事件而執行函數的頻率，使應用程式更流暢、更有效率、更反應更快。在本指南中，我們將探討這些概念，檢查它們的差異，並了解每個概念如何在特定用例中優化效能。

了解節流和去抖動

限制是一種強制函數執行受控、定期間隔的技術，無論觸發事件發生的頻率為何。透過限制指定時間段內的調用，限制可確保函數以可預測的方式（穩定且一致）調用，而不是隨著事件發生而頻繁調用。對於定期執行函數可以改善使用者體驗而又不會壓垮系統的情況來說，這是理想的選擇。

另一方面，去抖動會延遲函數的執行，直到經過設定的時間段而不再觸發事件。本質上，它在調用函數之前等待活動“暫停”，這使得它在只有在用戶活動平息後才應發生操作的情況下非常有用。例如，等到使用者完成輸入後再在搜尋欄位中進行 API 呼叫，可以防止不必要的請求並優化效能。

主要特點

節流的主要特徵

執行頻率：限制強制執行最大執行率。例如，如果連續觸發事件（例如調整視窗大小），則限制可確保函數在每個定義的時間間隔僅執行一次。
一致速率：此技術保持穩定、受控的執行速度，避免大量的函數呼叫並允許函數行為的可預測性。

去抖動的主要特徵

基於延遲的執行：函數僅在最後一個事件發生後一定延遲後執行，有助於避免過度執行。
事件停止後單次執行：如果事件繼續，函數呼叫會重複延遲，僅在活動停止後執行- 對於僅在用戶完成操作（例如鍵入）後才應發生操作的輸入來說是理想的選擇。

節流和去抖動用例

這些技巧在不同的場景中大放異彩：

限制用例：
- 捲動事件：限制對於由下列事件觸發的操作有效滾動，例如內容加載，可以預見地發生並持續不斷地不會壓垮介面。
- 調整大小事件：由視窗調整大小觸發的頻繁呼叫是透過節流控制，允許間隔調整而不是每次調整大小時都進行更改。
去抖動用例：
- 搜尋輸入：對於搜尋字段，去抖可防止不必要的 API 請求僅等待使用者停止輸入一段時間不活動後執行。
- 調整大小事件：與限制類似，消除調整大小事件的抖動是有助於確保佈局調整僅發生一次，之後調整大小完成。

實際例子

JavaScript 中的限制
以下是如何實作節流來限制函數執行的頻率：

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

const throttledScrollHandler = throttle(() => {
  console.log("Handling scroll event...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);

登入後複製

在此範例中，throttle 函數確保 ThreattedScrollHandler 僅每 1000 毫秒（1 秒）呼叫一次，即使使用者快速滾動也是如此。這樣可以節省系統資源並提高使用者體驗。

JavaScript 中的去抖
對於去抖動，這裡有一個延遲函數執行直到事件停止的方法：

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

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debouncedSearch(event.target.value);
});

登入後複製

在這種情況下，debouncedSearch 函數僅在鍵入停止後執行 300 毫秒。每次按鍵都會重置延遲計時器，因此該功能會等待使用者完成輸入，從而優化效能和使用者體驗。