js事件節流

2021-09-29 10:21:18 字數 682 閱讀 4331

js事件節流是乙個非常簡單的功能,但是前端開發人員在實際專案中很少考慮到該功能,主要原因可能是專案不大,或者並沒有出現卡頓現象,導致開發人員不會想到使用事件節流去優化**。

其實使用時間節流是乙個非常好的習慣,它本身也非常簡單,這裡我們說一下事件節流。

怎麼實現事件節流,非常簡單,就是在自己設定的時間內,上面提到的事件只觸發一次。貼**

首先定義乙個定時器並設定為null,在觸發事件後判斷定時器的值,如果為null說明當前沒有執行程式,這時候觸發settimeout方法,設定延遲時間,這個時間就是觸發一次事件的時間間隔。在事件執行後再把定時器物件設定為null,非常簡單!

//監聽進度事件

var timer =

null

; xhr.

addeventlistener

("progress"

,function

(evt)

,300)}

}catch

(e)}

,false

);

筆者在做事件節流相關功能時,發現按照上面的思路可以實現事件節流,但是也存在乙個問題,比如滑鼠移動事件,如果移動的時間比你設定的延遲時間要快,那麼最後一次移動的事件則無法觸發(說的不能觸發的是滑鼠移動後要執行的操作,不是滑鼠移動事件本身不能觸發)

JavaScript 事件節流

throttle 節流 param fn 執行函式 param obj 呼叫物件 return undefined function throttle fn,obj 500 設定間隔時間 呼叫 function handler window.onresize function const filte...

事件節流與事件防抖

事件防抖 最後一次觸發說了算。在一定時間內,不管你出發了多少次,我都只認最後一次。假設設定時間為 1000ms,這在 1000ms 內你再次觸發這個事件,就新增乙個新的計時器,之前的事件統統作廢,只執行最後一次。這裡的抖動停止表示你停止了觸發這個函式,從這個時間點開始計算,當間隔時間等於你設定時間,...

JS 手寫節流

doctype html en utf 8 x ua compatible content ie edge viewport content width device width,initial scale 1.0 document title box style head box box div ...