首页 > 代码库 > javascript scroll事件处理优化

javascript scroll事件处理优化

2024-09-19 22:05:41   216人阅读

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函数只被调用一次。

javascript scroll事件处理优化


联系
我们