javascript scroll事件處理最佳化

標籤：捲軸   方法   使用   javascrip   something   lis   處理   call   延遲   

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事件處理最佳化