對防抖和節流的理解及其應用場景

2022-04-28 03:24:55 字數 1871 閱讀 5629

在開發中,我們常常會去監聽滾動事件或者使用者輸入框驗證事件,如果事件處理沒有頻率限制,就會加重瀏覽器的負擔,影響使用者的體驗感,

因此,我們可以採取防抖(debounce)和節流(throttle)來處理,減少呼叫事件的頻率,達到較好的使用者體驗。

防抖(debounce):

在事件被觸發n秒後再執行**,如果在這n秒內又被觸發,則重新計時,重新出發定時器。

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

防抖演示

function

debounce(fn, wait)

timeout =settimeout(fn, wait);

}}

//處理函式

我們可以發現,當連續觸發scroll事件,handle函式只會在1秒時間內執行一次,在如果繼續滾動執行,就會清除定時器,重新計時。相當於就是多次執行,只執行一次。

節流(throttle):

規定在乙個單位時間內,只能觸發一次函式。如果這個單位時間內觸發多次函式,只有一次生效。

在節流函式內部使用開始時間prev、當前時間now和剩餘時間remain,當剩餘時間小於等於0意味著執行處理函式,這樣保證第一次就能立即執行函式並且每隔delay時間執行一次;

如果還沒到時間,就會在remaining之後觸發,保證最後一次觸發事件也能執行函式,如果在remaining時間內又觸發了滾動事件,那麼會取消當前的計數器並計算出新的remaing時間。

通過時間戳定時器的方法,我們實現了第一次立即執行,最後一次也執行,規定時間間隔執行的效果。

總結,看完了防抖和節流的分別介紹,我們來看看他們的區別:

防抖是將多次執行變為只執行一次,節流是將多次執行變為每隔一段時間執行。

防抖(debounce)

search搜尋聯想,使用者在不斷輸入值時,用防抖來節約請求資源。

window觸發resize的時候,不斷的調整瀏覽器視窗大小會不斷的觸發這個事件,用防抖來讓其只觸發一次

節流(throttle)

滑鼠不斷點選觸發,mousedown(單位時間內只觸發一次)

監聽滾動事件,比如是否滑到底部自動載入更多,用throttle來判斷

對防抖和節流的理解及其應用場景

在開發中,我們常常會去監聽滾動事件或者使用者輸入框驗證事件,如果事件處理沒有頻率限制,就會加重瀏覽器的負擔,影響使用者的體驗感,因此,我們可以採取防抖 debounce 和節流 throttle 來處理,減少呼叫事件的頻率,達到較好的使用者體驗。防抖 debounce 在事件被觸發n秒後再執行 如果...

防抖和節流 應用場景及實現

概念 假定時間間隔為200ms,如果觸發事件後的200ms內再次觸發事件,則重新等待200ms,否則將成功執行指定函式。應用場景 資料查詢 監控使用者輸入 實現 function search t settimeout 2000 var test1 document.getelementbyid t...

js防抖與節流以及應用場景

在前端開發中會遇到一些頻繁的事件觸發,例如input,keyup,keydown,scroll,resize,mousemove等,這非常影響效能,所以我們需要控制它們觸發的頻率,方法就是防抖與節流。debounce function debounce func,wait wait 如果直接使用un...