javascript scroll事件處理優化

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函數只被調用一次。