天然槑17 2022-06-19

函式防抖（debounce）：觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。

函式節流（throttle）：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。

函式節流（throttle）與 函式防抖（debounce）都是為了限制函式的執行頻次，以最佳化函式觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

1、防抖（debounce）

實現方式：每次觸發事件時設定一個延遲呼叫方法，並且取消之前的延時呼叫方法

缺點：如果事件在規定的時間間隔內被不斷的觸發，則呼叫方法會被不斷的延遲

2、節流（throttle）

實現方式：每次觸發事件時，如果當前有等待執行的延時函式，則直接return

**防抖：將多次操作合併為一次操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。

**節流：使得一定時間內只觸發一次函式。原理是透過判斷是否有延遲呼叫函式未執行。

區別：

節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而防抖只是在最後一次事件後才觸發一次函式。比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次ajax請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。

————————————————