白話文解說前端技術 - debounce

你知道「搜尋框」底下經常出現的「建議清單」是有些前端學問在的嗎?

這個建議清單,被稱為 autosuggesion / type-ahead / autocompletion / query autocompletion / QAC / predictive search, 後端的實作主要是提供 1 個 API 給前端使用,接受的 API 參數最少就是使用者的輸入字串,譬如傳入字串 a, 後端 API 則回傳 apple, amazon 等 a 開頭的字串,如果真的沒有 a 開頭的字串就退而求其次,改為推薦含有 a 的字串,不過字串排序規則很多種,各服務依其需求而有不同的作法,作法有使用頻率、相關度甚至是機器學習排序等等(離題了)。

前端呼叫 autosuggestion API 時,最暴力的情況是只要字串有變動就呼叫 1 次,例如輸入 app 就是 a 呼叫 1 次, ap 呼叫 1 次, app 呼叫 1 次,以此類推。

不過這種作法有 2 個主要問題:

  1. 因為前端無法保證後端 API 的回應順序,所以很有可能第 3 次的 API 回應之後,被回應比較慢的第 2 次 API 呼叫蓋掉建議清單,而且前端的畫面會有建議清單一直刷新的感覺,導致使用者體驗不好。
  2. 頻繁的呼叫後端 API 導致收到大量的要求,消耗後端運算資源。如果線上同時有 100 名使用者,每位都輸入長度為 10 的字串,後端就可能短時間收到 1,000 個要求,放大級數相當可觀⋯⋯。

為了解決這些問題,前端對於這種 autosugesstion 類似的使用情境,會加上 1 種稱為 debounce 的機制,在特定時間區間內不斷出發指定的事件的話,就會讓事件的處理延後執行,同樣舉輸入 app 字串為例,我們設定時間區間為 500ms, 假設輸入 a, p, p 的 2 個時間間隔在 300ms, 那麼 a 與 ap 這 2 個字串就不會被送到後端 API, debounce 機制會在輸入完最後 1 個 p 後,等待 500ms 之後才會送出字串 app 到後端 API, 如此不僅可以減少後端 API 的呼叫次數,還可以提升使用者體驗。

以 JavaScript 實作的話,程式碼類似下列形式,原理就是用 setTimeout() 延遲事件處理,如果在時間區間內被連續觸發,就取消原本排定的事件處理,也就是 clearTimeout(timeoutId),再延遲 1次:

const debounce = (fn, delay = 500) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn(...args)
    }, delay)
  };
};

上述程式碼可以貼到 DevTools 後用以下範例執行看看:

const f = debounce(() => console.log('yeah'), 5000)

只要執行:

f()

大概就會在 5s 後列印出 yeah, 如果 5 秒內一直呼叫 f(), yeah 會在最後 1 次呼叫 f() 之後的 5s 才會列印。

p.s. JavaScript 知名套件 Lodash 有提供 debounce 函式可以使用

以上就是 debounce 機制與應用場景的介紹!

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!