JavaScript 中的 debounce() 函式

1. 理解 JavaScript 中的術語 Debounce
2. 在 JavaScript 中使用 debounce() 函式

本文將教你如何利用 JavaScript debounce() 函式來提高應用程式的效能。

理解 JavaScript 中的術語 Debounce

JavaScript 使用去抖動技術來提高瀏覽器效能。去抖動是節流閥的相對物，它們都提高了線上應用程式的效能。

然而，它們在許多情況下被觀察到。當我們只考慮最終狀態時，就會使用去抖動。

例如，他們會延遲對預先輸入的搜尋結果的檢索，直到使用者完成輸入。如果我們想控制所有中間狀態的速度，最理想的工具是油門。

在 JavaScript 中使用 debounce() 函式

這是一個程式碼說明，可幫助你瞭解如何對函式進行去抖動：

function debounce(jss, timeout = 3000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      jss.apply(this, args);
    }, timeout);
  };
}

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

執行程式碼

那麼，這裡發生了什麼？debounce() 是一個獨特的函式，它執行兩個功能：

• 為計時器變數分配範圍
• 設定你的函式在特定時間執行

讓我們看一下第一個帶有文字輸入的用例，看看它是如何工作的。

當訪問者寫下第一個字母並釋放鍵（定時器）時，debounce() 函式最初使用 clearTimeout 重置定時器。此時不需要該步驟，因為沒有任何計劃。

函式 userInput() 預計將在 3000 毫秒（3 秒）內被呼叫。但是，如果訪問者繼續鍵入，每個基本版本都會重新觸發 debounce() 函式。

每次呼叫都必須重置計時器，或者換句話說，取消任何早期的 userInput() 準備並重新安排它到一個新的時間——未來 3000 毫秒。只要訪問者在 3000 毫秒內保持擊鍵，這種情況就會繼續。

因為之前的計劃不會被清除，userInput() 將被呼叫。

輸出：

你會看到當你輸入 s、h、i 或 v 時 setTimeout 方法會一直延遲（儘管呼叫了 userInput 函式）。當我們在打字時暫停三秒鐘時，會列印出主要功能：Changing data。

去抖動通過僅在設定的暫停時間後呼叫函式而不是在每次操作時呼叫函式來提高應用程式速度。但是，你不必自己完成此操作。

例如，Lodash 中提供了一個 debounce 功能。貢獻者改進了 Lodash 等庫，以改進 debounce 功能。

在本文中，我們已經討論了什麼是去抖動、它為什麼有用以及如何在 JavaScript 中實現它。