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