防抖和節流的區別及實現方式

2021-10-08 12:49:49 字數 1121 閱讀 6603

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

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

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

實際上對於window的resize事件，實際需求大多為停止改變大小n毫秒後執行後續處理；而其他事件大多的需求是以一定的頻率執行後續處理。

防抖(debounce)

//防抖debounce**：


function


debounce


(fn,delay)


, delay);}


;}// 處理函式


function


handle()


//滾動事件


window.


addeventlistener


('scroll'


,debounce


(handle,


500)


);
節流(throttle)

//節流throttle**：


function


throttle


(fn,delay)


, delay);}


;}function


sayhi


(e)window.


addeventlistener


('resize'


,throttle


(sayhi,


500)


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

js防抖和節流的區別及實現方式

函式防抖 debounce 觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。函式節流 throttle 高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次，以優...

節流和防抖 區別和實現

實現 函式節流 開始會執行一次，持續觸發事件的話，每隔wait時間執行一次 應用場景mousemove,scroll等會連續執行的事件，比較適合應用於動畫相關的場景。param fn 需要節流的函式 param wait 間隔時間 export function throttle fn,wait 1...

防抖和節流的實現

常見的滾動監聽事件，每次滾動都會觸發，如此太過浪費效能，要如何優化呢？思路 在第一次觸發事件的時候，不是立即執行函式，而是給出乙個delay時間值，例如200ms 效果 短時間內大量出發同一事件最終只會執行一次 實現 利用settimeout來實現計時器的功能 防抖 const debounce f...