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