JavaScript - 防抖

在開發應用程式時，有時限制函式呼叫以提高 Web 應用程式效能非常重要。防抖是一種程式設計技術，有助於限制函式呼叫。

讓我們進一步瞭解 JavaScript 中的防抖。

什麼是防抖？

防抖是一種更簡單的方法，用於延遲特定函式的執行，直到自上次執行該函式以來經過了一定時間。當我們想要避免不必要的重複函式呼叫時，使用防抖非常重要。簡而言之，它充當速率限制器。

例如，當您按下按鈕呼叫電梯時，它會註冊該事件。之後，當您在短時間內多次按下呼叫按鈕時，它會忽略按鈕按下，因為電梯無法透過多次按下按鈕來更快地到達。

如何在 JavaScript 中實現防抖？

我們可以透過不同的方式在 JavaScript 中實現防抖，但其中一種方式是使用 setTimeOut() 方法。每當發生任何事件時，它都應該呼叫一個返回新函式的特定函式，該函式在一定延遲後執行特定函式。

讓我們透過下面的示例更深入地瞭解它。

示例

在下面的程式碼中，當用戶單擊按鈕時，它會呼叫 debounce() 函式。

debounce() 函式將我們需要執行的函式作為第一個引數，並將時間延遲作為第二個引數。

在 debounce() 函式中，我們定義了 'timeout' 變數來儲存計時器的 ID 並返回該函式。在內部函式中，我們獲取函式執行呼叫上下文中和引數。之後，我們清除先前的超時並使用 setTimeOut() 方法設定新的計時器。

我們使用 apply() 方法在特定延遲後呼叫該函式。

<html>
<body>
   <h2> JavaScript - Debouncing </h2>
   <div id = "output"> </div>
   <button id = "btn"> Debounce </button>
   <script>
      var output = document.getElementById("output");
      var btn = document.getElementById("btn");
      // Add event listener to button
      btn.addEventListener("click", debounce(function () {
         output.innerHTML = "Hello " + new Date().toLocaleTimeString();
      }, 2000));

      // Debounce function
      function debounce(func, wait) {
         // Initialize timeout variable
         var timeout;
         // Return a function
         return function () {
            // Save the context and arguments of the function
            var context = this,
            args = arguments;
            // Clear the timeout
            clearTimeout(timeout);
            // Set the timeout
            timeout = setTimeout(function () {
               // Call the function
               func.apply(context, args);
            }, wait);
         };
      }
   </script>
</body>
</html>

輸出

在上面的輸出中，嘗試在 2 秒內多次單擊按鈕。它只會執行一次該函式。

防抖的優勢

防抖有很多好處。在這裡，我們介紹了一些。

防抖透過速率限制提高了 Web 應用程式的效能。
它透過在特定時間段內發出有限數量的請求來減少伺服器負載。
它透過提高 Web 應用程式的效能來增強使用者體驗。
它可以防止不必要的 API 呼叫，從而降低成本。

防抖的實際用例

在這裡，我們介紹了一些防抖的實際用例。

防抖可以與搜尋框一起使用。只有當用戶暫停輸入時，它才會向伺服器發出請求，並減少 API 請求。
它可以與無限滾動和延遲載入一起使用。開發人員可以知道使用者何時停止滾動，僅獲取所需資料並載入它們。
防抖也可以用於遊戲控制元件以過濾掉意外的雙擊或三擊。

列印頁面