Web前端性能優化——高頻觸發事件的防抖

JS 提供了行爲層的支持,爲用戶提供了交互的操作性。然而,部分事件卻經常有意無意的被頻繁觸發,比如瀏覽器窗口的 resize 事件,某個元素的 mouseover 事件,如果處理觸發事件的回調函數過重,那麼最後的結果就是瀏覽器死掉。

爲此,如何提供一種對此類事件的高頻觸發的防抖是相當重要的。

所謂的防抖,就是在一定時間內,規定事件被觸發的最多次數。

參考:http://www.gbtags.com/gb/share/1217.htm

給出下面的防抖程序

function debounce(func, wait, immediate){
    var timeout;
    return function(){
        var context = this,
              args = arguments;
        var later = function(){
            timeout = null;
            if(!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if(callNow) func.apply(context, args);
    };
}
若添加 mouseover 事件,並規定只運行它每300毫秒執行一次,則

var link = document.getElementById("links");

link.addEventListener("mouseover", debounce(function(){
	//添加回調處理函數的函數體
},300,true), false);

但是,經測試發現,若把時間設置大些,比如5秒,那麼每次moueover 事件的發生都會刷新計時器,也就是說如果用戶一直在mouseover,則這個處理事件永遠不會發生。

爲此,我們可以加多一個條件:

function debounce(func, wait, immediate){
    var timeout;
    return function(){
        var context = this,
              args = arguments;
        var later = function(){
            timeout = null;
            if(!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        if(!timeout){
	    clearTimeout(timeout);
	    timeout = setTimeout(later, wait);
	}
        if(callNow) func.apply(context, args);
    };
}

這樣一來實現的效果就是,當用戶的 mouseover 觸發了事件發生,就會觸發計時器的計時,過程中其他的 mouseover 事件不會觸發事件發生,也不會觸發計時器的重置,效果纔是真正的在規定時間內只允許事件被觸發一次。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章