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