在浏览器上,某些事件的触发是非常频繁的,几乎是毫秒级的,最典型的就是document.onmousemove,而这么频繁的事件,往往都是弊大于利的。今天看到一个很好的解决办法,这里稍加改进成通用的方法,虽不能彻底解决问题,但是可以有效缓解,而且简单易行,核心代码如下:
01 |
//可进一步扩展为支持可传参的fn |
02 |
var onFooEndFunc = function (fn) { |
03 |
var delay = 50; // 根据实际情况可调整延时时间 |
04 |
var executionTimer; |
05 |
return function () { |
06 |
if (!!executionTimer) { |
07 |
clearTimeout(executionTimer); |
08 |
} |
09 |
//这里延时执行你的函数 |
10 |
executionTimer = setTimeout( function () { |
11 |
//alert('123'); |
12 |
fn(); |
13 |
}, delay); |
14 |
}; |
15 |
}; |
上面只是以 document.onmousemove为例,还有很多其他DOM事件存在相同问题,例如onScroll, onMouseMove, onResize,同理,都可以用这个方法来解决,具体还可以看这里的例子,方法本质上都是一样的。