JS 中的反跳：建立更好的 Web 應用程式-js教程-PHP中文網

JS 中的反跳：建立更好的 Web 應用程式

Susan Sarandon

發布： 2024-12-06 19:56:11

原創

320 人瀏覽過

Debouncing in JS: Building better web apps

您是否曾經訪問過某個網站，在搜尋欄中輸入內容，並註意到建議是如何即時彈出的，而不會造成任何延遲？或者，您可能已經填寫了一份表格，並在打字時看到「使用者名稱已被佔用」訊息出現。這些無縫體驗的背後是現代網路開發中一個強大的、常常被忽視的英雄：去抖動。

什麼是去抖動？

去抖動是一種程式設計技術，可確保函數僅在指定的不活動時間後執行。想像一下您正在搜尋欄中輸入內容。如果沒有去抖，每次擊鍵都會觸發函數調用，可能會因冗餘請求而壓垮系統。去抖動透過在執行函數之前等待輸入暫停來解決這個問題，確保只發送一個請求。

它是如何運作的？

其核心是控制函數執行的頻率。但為了更容易理解，讓我們舉一個門鈴的例子。假設有一個門啤酒在 3 秒不活動後響起。在初次響鈴後，如果使用者嘗試多次按鈴，除非他決定再過 3 秒，否則它不會響。

在 JavaScript 中，去抖動通常與輸入、捲動或調整大小等事件偵聽器一起使用。這是一個基本的實作：

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

登入後複製

讓我們來了解這段程式碼的不同元素：

debounce：建立並傳回給定函數的去抖版本的主函數。
回調：去抖延遲後執行的函數。
延遲：函數在執行回呼之前應在最後一個事件之後等待的時間（以毫秒為單位）。
timeoutId 定義為儲存 setTimeout 所建立的計時器的識別碼。這使我們能夠在開始新計時器之前清除任何正在進行的計時器，從而防止不必要或重複的函數執行。
clearTimeout 取消與 timeoutId 關聯的任何現有計時器。

實際用例

搜尋輸入欄位： 即時搜尋是去抖動的經典用例。如果沒有它，每次擊鍵都可能觸發資料庫查詢，從而使伺服器不堪重負。通過去抖，僅在使用者停止鍵入後才呼叫該函數，從而減少伺服器負載並提高效能。

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

登入後複製

表單驗證： 表單上的即時回饋固然很棒，但驗證每次按鍵的輸入可能會佔用大量資源。去抖動允許您延遲驗證，直到使用者停止鍵入。

const handleSearch = debounce((query) => {
  fetch(`https://api.example.com/search?q=${query}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}, 500);

document.getElementById("search").addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

登入後複製