什麼是 debounce ?

debounce 是一種用於防止事件處理過於頻繁發生的技術，常用於處理使用者輸入，例如按鍵事件或搜尋框的輸入事件。

範例

以文字搜尋功能為例，使用者每次搜尋打的文字都會呼叫後端的 api 拿回資料，但通常使用者想搜尋的是最後打字的結果，而此時就適合使用 debounce 在一定時間過後才去真正的呼叫後端 api

以下面為例，搜尋框改變時，不會馬上觸發 onInput 方法，而是會等 500ms 後，如果搜尋框的文字沒有任何改變，才呼叫 onInput 方法

<input type="text" onInput="debounceInput" />

const onInput = (event) => {
  console.log(event.target.value);
  // call api...
};
const debounceInput = debounce(onInput, 500);

閱讀更多