JavaScript 中的節流與去抖：初學者指南-js教程-PHP中文網

JavaScript 中的節流與去抖：初學者指南

王林

發布： 2024-09-07 06:32:09

原創

605 人瀏覽過

Throttling & Debouncing in JavaScript: A Beginner

使用 JavaScript 時，過多的事件觸發器可能會降低應用程式的速度。例如，使用者調整瀏覽器視窗大小或在搜尋列中輸入內容可能會導致事件在短時間內重複觸發，進而影響應用程式效能。

這就是節流和去抖動可以發揮作用的地方。它們可以幫助您在處理過於頻繁觸發的事件時管理呼叫函數的頻率。

？什麼是節流？

限制限制函數的執行頻率。即使事件重複發生，受限的函數只會在每個指定的時間間隔內執行一次。

範例：

想像一下您在一場音樂會上，並且正在拍照。但您決定每 5 分鐘只拍一張照片（無論表演有多精彩）。這就像節流一樣。無論發生多少值得拍照的時刻，您都會堅持每 5 分鐘拍一張照片的規則。

在 JavaScript 中，當您想要追蹤使用者向下捲動頁面的頻率，但您不希望每毫秒觸發該函數時，可以套用此功能。透過限制，您可以控制該函數的執行頻率。

程式碼範例：

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

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

登入後複製

在此範例中，無論使用者滾動的速度有多快或多頻繁，handleScroll 函數只會每 2 秒（2000 毫秒）運行一次。

？什麼是去抖動？

去抖動確保函數僅在一段不活動時間後被呼叫。如果事件持續觸發，函數將不斷重置計時器，並且僅在事件停止後觸發。

範例：

想像一下您正在群組聊天中，並且正在輸入一則訊息。您不想每次按下某個按鍵時都向您的朋友發送通知。相反，您需要等到停止輸入幾秒鐘後再發送「正在輸入...」通知。這就是去抖動——僅在打字暫停後發送通知。

在 JavaScript 中，當使用者在搜尋框中鍵入內容時，經常會使用去抖動。您可以等到使用者停止鍵入一段時間後再執行搜索，而不是在每次按鍵後發送搜尋查詢。

程式碼範例：

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

登入後複製

在此範例中，handleInput 函數僅在使用者停止輸入 500 毫秒後執行。