滾動、調(diào)整大小或鍵入等事件經(jīng)常會重複觸發(fā)功能，有時在幾秒鐘內(nèi)觸發(fā)數(shù)百次。想像一下，當(dāng)使用者鍵入時，搜尋列會從伺服器取得建議，或是當(dāng)瀏覽器視窗變更時，調(diào)整大小處理程序會不斷調(diào)整佈局。如果不加以控制，這些功能可能會使瀏覽器過載，降低使用者體驗(yàn)，甚至?xí)蜻^多的 API 請求而增加伺服器成本。

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

了解節(jié)流和去抖動

限制是一種強(qiáng)制函數(shù)執(zhí)行受控、定期間隔的技術(shù)，無論觸發(fā)事件發(fā)生的頻率為何。透過限制指定時間段內(nèi)的調(diào)用，限制可確保函數(shù)以可預(yù)測的方式（穩(wěn)定且一致）調(diào)用，而不是隨著事件發(fā)生而頻繁調(diào)用。對於定期執(zhí)行函數(shù)可以改善使用者體驗(yàn)而又不會壓垮系統(tǒng)的情況來說，這是理想的選擇。

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

主要特點(diǎn)

節(jié)流的主要特徵

• 執(zhí)行頻率：限制強(qiáng)制執(zhí)行最大執(zhí)行率。例如，如果連續(xù)觸發(fā)事件（例如調(diào)整視窗大小），則限制可確保函數(shù)在每個定義的時間間隔僅執(zhí)行一次。

• 一致速率：此技術(shù)保持穩(wěn)定、受控的執(zhí)行速度，避免大量的函數(shù)呼叫並允許函數(shù)行為的可預(yù)測性。

去抖動的主要特徵

• 基於延遲的執(zhí)行：函數(shù)僅在最後一個事件發(fā)生後一定延遲後執(zhí)行，有助於避免過度執(zhí)行。

• 事件停止後單次執(zhí)行：如果事件繼續(xù)，函數(shù)呼叫會重複延遲，僅在活動停止後執(zhí)行- 對於僅在用戶完成操作（例如鍵入）後才應(yīng)發(fā)生操作的輸入來說是理想的選擇。

節(jié)流和去抖動用例

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

• 限制用例：

  • 捲動事件：限制對於由下列事件觸發(fā)的操作有效 滾動，例如內(nèi)容加載，可以預(yù)見地發(fā)生 並持續(xù)不斷地不會壓垮介面。
  • 調(diào)整大小事件：由視窗調(diào)整大小觸發(fā)的頻繁呼叫是 透過節(jié)流控制，允許間隔調(diào)整 而不是每次調(diào)整大小時都進(jìn)行更改。

• 去抖動用例：

  • 搜尋輸入：對於搜尋字段，去抖可防止不必要的 API 請求僅等待使用者停止輸入 一段時間不活動後執(zhí)行。
  • 調(diào)整大小事件：與限制類似，消除調(diào)整大小事件的抖動是 有助於確保佈局調(diào)整僅發(fā)生一次，之後 調(diào)整大小完成。

實(shí)際例子

JavaScript 中的限制
以下是如何實(shí)作節(jié)流來限制函數(shù)執(zhí)行的頻率：

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);

在此範(fàn)例中，throttle 函數(shù)確保 ThreattedScrollHandler 僅每 1000 毫秒（1 秒）呼叫一次，即使使用者快速滾動也是如此。這樣可以節(jié)省系統(tǒng)資源並提高使用者體驗(yàn)。

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

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 函數(shù)僅在鍵入停止後執(zhí)行 300 毫秒。每次按鍵都會重置延遲計時器，因此該功能會等待使用者完成輸入，從而優(yōu)化效能和使用者體驗(yàn)。

結(jié)論

節(jié)流和去抖動是優(yōu)化高頻事件的重要技術(shù)，可帶來更流暢的使用者體驗(yàn)和高效的資源利用。透過理解這些技術(shù)並仔細(xì)應(yīng)用它們，開發(fā)人員可以控制函數(shù)執(zhí)行速率，從而增強(qiáng)前端性能和系統(tǒng)響應(yīng)能力。

追蹤我，以了解更多關(guān)於 React、TypeScript 和現(xiàn)代 Web 開發(fā)實(shí)務(wù)的見解！ ？ ?？

以上是Web 開發(fā)中的節(jié)流與去抖動的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！