iT邦幫忙

4

Web基礎系列 - 10 - Web Performancelo : 什麼是 Debounce 和 Throttle?

web
  • 分享至 

  • xImage
  •  

什麼是 Debounce 和 Throttle?簡單又好懂!

當你用電腦、手機滑鼠或鍵盤時,系統會不停收到很多很多事件,比如你一直滑鼠移動或一直打字,這時候如果電腦每收到一次就馬上做事情,會很忙很慢。

為了不要一直忙,有兩個小技巧幫忙控制:

  • Debounce(防抖動)
    假設你一直打字,但你只想在「停止打字」一段時間後才做事,防抖動就是:只要你不停動手,電腦就等著;等你停下來不動,它才開始做事情。

  • Throttle(節流)
    假設你一直滑鼠移動,節流就說:「我每隔固定時間只能做一次事,不管你滑鼠移動了多少次!」就像排隊,每個人都不能走太快。

它們有什麼差別?

特色 Debounce(防抖) Throttle(節流)
觸發行為 只在停止動作後才執行一次 固定時間內最多執行一次
用在哪裡 比如打字完畢後搜尋 比如滑鼠移動或滾輪,每秒更新畫面
動作順序 等你停下來才動 按正常時間間隔動

後端也有類似概念?

後端不是只有前端有滑鼠、鍵盤事件,後端也會被外面送來很多請求。如果後端收到太多請求,伺服器會很忙、資料庫會卡住,網站會變慢或掛掉。

用 debounce 和 throttle 就可以幫助後端「不會太多事同時發生」,讓後端工作慢慢進行,保持穩定。


後端語言也能用嗎?

當然可以!寫程式也能實作 debounce 和 throttle,控制像API請求、資料處理的頻率。還有現成的函式庫,幫你實現這些功能。只是後端通常不用debounce這個字,比較常會出現 per-user rate limit、cooldown。


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言