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 事件不会触发事件发生,也不会触发计时器的重置,效果才是真正的在规定时间内只允许事件被触发一次。


你可能感兴趣的:(前端性能优化)