節流和防抖的區別,以及如何實現

2022-06-28 20:45:12 字數 939 閱讀 6836

防抖

觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間

//防抖debounce**:

function debounce(fn) , 500);

};}// 處理函式

function handle()

// 滾動事件

window.addeventlistener('scroll', debounce(handle));

節流

高頻事件觸發,但在n秒內只會執行一次,所以節流會稀釋函式的執行頻率

//節流throttle**:

function throttle(fn) , 500);

};}function sayhi(e)

window.addeventlistener('resize', throttle(sayhi));

總結:

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

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

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

節流和防抖的區別,以及如何實現

防抖觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間 防抖debounce function debounce fn 500 處理函式 function handle 滾動事件 window.addeventlistener scroll debounce hand...

節流和防抖 區別和實現

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

防抖和節流的實現

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