JavaScript 前端效能優化之事件節流

mst發表於2019-04-10
JavaScript前端優化事件

JavaScript 前端效能優化之事件節流

定義： 當持續觸發事件時，在規定時間段內只能呼叫一次回撥函式。如果在規定時間內又觸發了該事件，則什麼也不做,也不會重置定時器.

應用場景：

  • 滑鼠不斷點選觸發，點選事件在規定時間內只觸發一次(單位時間內只觸發一次)
  • 監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷
  • 拖拽時的mousemove事件

實現方式：一種是使用時間戳，另外一種使用定時器的方式。

使用時間戳

首先採用時間戳的方式實現：具體思路，當觸發事件的時候，取出當前時間戳，然後減去之前的時間戳（第一次預設為0），如果大於設定的時間週期（單位毫秒），就執行函式並且更新時間戳為當前時間戳，如果小於則不執行函式

function throttle(fun,wait){
    let previous = 0;
    let content,args;
    return function(){
        content = this;
        args = arguments;
        let now = +new Date();  //獲取當前時間戳
        if(now-previous>wait){  
            fun.apply(content,args);
            previous = now;
        }
    }
}
複製程式碼

使用定時器

當觸發事件的時候，先設定一個定時器，再次觸發事件的時候判斷定時器是否存在，如果存在就不執行事件，直到定時器執行完之後執行函式，並且清空定時器

function throttle(fun,wait){
    let timer;
    return function(){
        let content = this;
        let args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                timer = null;
                fun.apply(content,args);
            },wait)
        }
    }
}
複製程式碼

比較這兩種方法：

  • 採用時間戳的方式：事件會立即執行，而定時器方式事件會在n秒之後第一次執行
  • 採用時間戳的方式：事件停止觸發以後沒有辦法再次執行函式，而定時器方式事件停止觸發後依舊會再執行一次函式

相關文章