Javascript Debounce & Throttle 提升網頁效能

Javascript ｜ 2023-02-04

debounce 與 throttle 用來防止 scroll, resize 等事件處理器在短時間內被頻繁觸發，綁定的函示重複執行，造成網頁不斷重新運算進而影響效能，作法就是控制函式觸發的次數或頻率，以下分別說明兩者的操作方式。

Debounce

概念是加入一個倒數計時器，連續觸發時會一直重新倒數，直到計時器歸零，才執行函式。

簡單舉例：
就像是便利商店的自動門，當一段時間內頻繁有客人進來，自動門會持續開著，直到大家都進入後，等待幾秒才關上。