德本

dboun 函數是一個實用程序，旨在限制函數執行的速率。它確保僅在自上次呼叫以來經過指定的延遲（delay）後才呼叫所提供的函數（fn）。預設情況下，延遲設定為 400 毫秒。

這對於處理頻繁觸發的事件特別有用，例如調整大小、捲動或鍵入，透過防止過度呼叫所提供的函數。

使用範例

場景：使用去抖動搜尋輸入

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

在此範例中：

• handleSearch 是處理搜尋邏輯的函數。
• debouncedSearch 確保僅在輸入不活動 300 毫秒後執行 handleSearch。

參數

1. fn（函數）：去抖延遲後要執行的函數。

   • 這是在指定延遲後將呼叫的回調函數。

2. delay（數字，可選）：呼叫 fn 之前等待的毫秒數。預設為 400 毫秒。

   • 這決定了去抖間隔。

退貨

dboun 函數傳回 fn 的新去抖版本。返回的函數會延遲 fn 的調用，直到自上次調用返回的函數以來經過延遲毫秒後。

它是如何運作的

• 呼叫傳回的函數時，它會清除為該函數設定的任何現有計時器 (clearTimeout(timeout))。
• 然後設定一個新的計時器 (setTimeout) 以在指定的延遲後呼叫 fn。
• 如果在延遲期結束之前再次呼叫返回的函數，則先前的計時器將被清除並重置。

實際應用

1. 輸入處理：當使用者在輸入欄位中鍵入內容時，去抖動可防止事件處理程序的過度執行。
2. 調整大小事件：透過消除視窗調整大小事件處理程序來管理效能。
3. 滾動事件：透過控制滾動事件處理程序的執行頻率來避免效能瓶頸。

筆記

• 如果您需要立即執行然後延遲（類似節流閥的行為），則此函數不提供開箱即用的功能。
• 始終確保延遲適合用例，以平衡回應能力和效能。

瀏覽器相容性

dboun 函數使用現代 JavaScript/TypeScript 功能，使其與大多數現代環境相容。對於較舊的環境，請考慮轉譯代碼。

測試

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

以上是德本的詳細內容。更多資訊請關注PHP中文網其他相關文章！