web效能優化之事件節流
阿新 • • 發佈:2019-01-31
問題:滑鼠滾輪滾動一下,scroll事件觸發了12次
document.addEventListener('scroll',function(){
console.log('hello')
})
事件節流背後的思想是指:某些程式碼不可以在沒有間斷的情況下連續重複執行,第一次呼叫函式,建立一個定時器,在指定的時間間隔之後執行程式碼,第二次呼叫該函式時,它會清除前一次的定時器,並設定一個,如果前一個定時器已經執行過了,這個操作就沒有任何意義,然而,如果前一個定時器尚未執行,其實就是將其替換為一個新的定時器,目的是隻有在執行函式的請求停止了一段時間之後才執行。
改進後的程式碼如下:
var processor = { timeoutId:null, // 定義一個定時器 performProcessing:function(){ // 實際待操作的程式碼 console.log('hello') }, process:function(){ // 初始化呼叫的程式碼 clearTimeout(this.timeoutId); // 清除定時器 var me = this; // 變數替換 this.timeoutId = setTimeout(function(){ // 設定定時器呼叫待操作的程式碼 me.performProcessing(); },100) } } // 繫結事件scroll, 呼叫回撥函式,processor.process(), 並且繫結環境processor這個物件 document.addEventListener('scroll',processor.process.bind(processor));
使用事件節流的其他情況:
例如:IE中使用的onresize事件,當調整瀏覽器大小的時候,該事件會連續觸發,假如在onresize 事件處理程式內部如果嘗試進行dom操作,其高頻率的更改可能會讓瀏覽器奔潰。