window.addEventListener(‘scroll‘ , function(){ //do something console.log(‘scroll ....‘) })
我们常常使用上面代码监听window的scroll事件，但是使用这种方式每次滚动会多次打印scroll..., 如果直接在这种情况下直接调用事件处理逻辑，当逻辑比较复杂时势必会造成一定的性能影响
如果我们想每次滚动滚轮只执行一次处理逻辑,可以使用以下方式处理
function callback(){ //do something console.log(‘scroll once..‘); } var timeoutRef; window.addEventListener(‘scroll‘ , function(){ if(timeoutRef){ clearTimeout(timeoutRef); } timeoutRef = setTimeout(callback , 50); })
通过这种方法延迟调用逻辑处理方法，当事件频繁调用时会清除上次的延时器，延时函数就不会被调用执行，直到滚动结束时最后一次执行scroll函数时，绑定的延时函数才会执行。
如此基本可以保证每次滚动滚动条，callback函数只被调用一次。
原文：http://www.cnblogs.com/hmact/p/6817355.html