js效能優化之函式節流 分流函式

2022-07-01 17:21:11 字數 415 閱讀 7758

比如我們在window.onresize事件中要列印當前瀏覽器視窗的大小,在我們通過拖拽來改變視窗大小時候,列印視窗大小這個工作1s就執行了10次。而實際上我們只需要2次或者3次。 

比如這行**

window.onresize = function()

實現的思路就是將即將被執行的函式用settimeout延遲一段時間再執行。如果該次執行還沒有完成,則忽略下面呼叫該函式的請求。

因此這個節流函式有兩個引數,乙個是需要被執行的函式,另乙個是延遲的時間

var throttle = function(fn, interval) 

if (timer)

timer = settimeout(function() , interval || 500)

}}

效能優化 函式節流

專案中遇到乙個需要實現文字拖動的效果,用mousedown mousemove mouseup模擬拖動效果。但是實現的效果並不是很理想,原因是mousemove是乙個高頻事件,觸發的頻率非常高,會造成瀏覽器的效能問題。高頻觸發事件,對執行函式進行節流可以節省瀏覽器資源,以免造成不必要的效能浪費。具體...

Javascript效能優化之 函式節流技術

函式節流技術的主要思路是,通過乙個定時器,阻斷連續重複的函式呼叫。對於我們自己內部使用的函式,這通常意義不大,也不推薦使用這個技術,它可能會丟失對某些資料的處理。但是對於在使用者介面呼叫的函式,卻非常有意義。例如乙個 mousemove 或者ie 中resize 事件的監聽函式。這類事件監聽函式往往...

js函式節流(Throttle)

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