函式節流(throttle)

2022-09-05 18:03:11 字數 606 閱讀 3639

函式節流的目的,是為了防止在不間斷的時間裡,重複執行某個函式。

比如瀏覽器的onresize事件,如果我們在這個函式中操作了dom元素,那麼對cpu的開銷是非常大的。

所以為了防止這種情況的出現,函式節流起到了很好的作用。

1/**

2* 函式節流方法

3* @param delay 延遲delay毫秒後,執行fn函式

4* @param fn 需要執行的函式

5* @param context 上下文6*/

7var throttle = function

(delay, fn, context) , delay)13}

1415

//注意:需要節流的函式必須是具名函式,否則tid無效

16var resizeevent = function

() 19

20//

resize函式每秒會觸發20多次。使用throttle函式後,只會在最後一次的rezise觸發後,間隔500毫秒後才真正觸發要執行的resizeevent函式

21 window.addeventlistener('resize', function

() )

js函式節流(Throttle)

在瀏覽器 dom 事件裡面,有一些事件會隨著使用者的操作不間斷觸發。比如 重新調整瀏覽器視窗大小 resize 瀏覽器頁面滾動 scroll 滑鼠移動 mousemove 也就是說使用者在觸發這些瀏覽器操作的時候,如果指令碼裡面繫結了對應的事件處理方法,這個方法就不停的觸發。而當事件處理比較複雜的時...

JS中的函式節流throttle詳解和優化

js中的函式節流throttle詳解和優化 在前端開發中,有時會為頁面繫結resize事件,或者為乙個頁面元素繫結拖拽事件 mousemove 這種事件有乙個特點,在乙個正常的操作中,有可能在乙個短的時間內觸發非常多次事件繫結程式。dom操作時很消耗效能的,如果你為這些事件繫結一些操作dom節點的操...

throttle 節流函式解析記錄

最近在看vue的 lazyload外掛程式,裡面用到了節流函式。對這一塊不太了解,所以開始學習節流函式loadsh的原始碼,做乙個記錄吧,多做總結總是好的。loadsh節流函式的api是這樣的 throttle func,wait,options 節流函式的作用,其實就是和名字一樣,限制某些功能函式...