防抖動與節流

2021-09-14 05:47:05 字數 793 閱讀 9433

針對一些會頻繁觸發的事件如scroll、resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能。所以我們對於這種事件我們要進行防抖動或者節流的處理來優化效能。

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

節流:使得一定時間內只觸發一次函式。

它和防抖動最大的區別就是,節流函式不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函式,而防抖動只是在最後一次事件後才觸發一次函式。

原理是通過判斷是否到達一定時間來觸發函式,若沒到規定時間則使用計時器延後,而下一次事件則會重新設定計時器。

時間戳實現:

當高頻事件觸發時,第一次應該會立即執行(給事件繫結函式與真正觸發事件的間隔如果大於delay的話),而後再怎麼頻繁觸發事件,也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後,事件也不會再被執行了。

var throttle = function(func,delay)

}}

定時器實現:

當觸發事件的時候,我們設定乙個定時器,再觸發事件的時候,如果定時器存在,就不執行;直到delay秒後,定時器執行執行函式,清空定時器,這樣就可以設定下個定時器。

var throttle = fucntion(func,delay),delay);}}

}

防抖動與節流

針對一些會頻繁觸發的事件如scroll resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能。它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現debouncing的方法是將若干個函式呼叫合成一次,並在給定時間過去之後僅被呼叫一次。123 4567 ...

js 防抖動與節流

針對一些會頻繁觸發的事件如scroll resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能。因此針對這類事件要進行防抖動或者節流處理 它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現 debouncing 的方法是將若干個函式呼叫合成 一次,並在...

js 函式節流 與 防抖動

函式節流 就如同成都搖號買房,前乙個進去選房了,下乙個就要等一段時間。這種策略就很好的解決了,一大波人進去選房,銷售妹妹沒發接待的尷尬局面。應用場景 監聽瀏覽器滾動條,然後觸發函式。普通做法 document.getelementbyid throttle onscroll function 函式節...