Debounce

防抖

01你是不是遇到這個 / THE SYMPTOM

我做了一個搜尋框，使用者每打一個字就會送一次 API 查詢，一句話打下來就觸發了十幾次，又慢又浪費。我想讓它「等使用者停下來」再查，但不知道這個技術叫什麼。

↑ 如果你點頭了，你要的關鍵字就是 Debounce。

02這是什麼 / DEFINITION

Debounce（防抖）是一種讓「連續快速觸發的事件」延後執行的技巧：事件每被觸發一次就重新計時，只有在停止觸發超過設定時間（例如 300ms）後，才真正執行一次。

03什麼時候用 / WHEN TO USE

搜尋框即時查詢、輸入框自動存草稿、視窗 resize 後重算版面、表單即時驗證——任何「使用者會連續觸發、但你只在乎『他停下來那一刻』的結果」的場景。

04怎麼跟 AI 說 / HOW TO ASK

直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：

幫我把這個搜尋框加上 debounce，使用者停止輸入 300ms 後才送出 API 查詢，避免每打一個字就打一次 API。

05常見坑 / WATCH OUT

⚠ 最容易跟 throttle（節流）搞混。debounce 是「停下來才執行一次」（適合搜尋）；throttle 是「執行中也固定每隔一段時間執行一次」（適合捲動、拖曳這種需要過程中也持續更新的）。問 AI 時要講清楚要哪一種。

06相關的詞 / RELATED

我監聽捲動（或滑鼠移動）來做動畫效果，結果一捲動就觸發爆量、頁面卡到不行。我不要它停下來才動，而是希望它「過程中也照常更新、但別觸發那麼密」，不知道這招叫什麼。

我有一個任務在後端跑（例如 AI 生圖、檔案轉檔），要等它跑完。我想讓前端「每隔幾秒自動問一次後端：好了沒？」直到完成才停，然後更新畫面。不知道這種「定時重複去問」的做法叫什麼。