以 JavaScript 實作 Debounce 提升應用程式效能（與搭配 immediate 的額外應用）

網頁中時常會有一些執行起來「成本較高」的函式，像是去打 API 取資料。試想如果這個函式非常容易被重複觸發，譬如使用者在電影查詢的搜尋匡中，每打一個字就去打 API 取得搜尋建議的結果來顯示，那對於前後端都會是個極大的負擔吧！

看看下面 Walmart 的搜尋匡，在一開始我們嘗試緩慢地打 a、b、c，每次輸入完一個字母都停頓了好一陣子，而網頁也依序地向後端 API 搜尋關鍵字搜尋結果。想像一下如果商品品名很長，那消費者在快速且持續輸入的過程中，豈不是要發出非常多請求呢？

然而在影片的後續片段，我們快速地打了一串英文字母，中間只停頓了一下下（模仿使用者快速打完欲搜尋的商品關鍵字），最終卻只發出了三個搜尋請求。實際上，在快速輸入的過程中，我們也還沒有打完關鍵字，所以在短時間，逐字發出請求的必…