scroll最適化の手ぶれと節流

この最適化案は【先端性能】高性能スクロールscroll及びページレンダリング最適化を参照してください.
ここでは簡単に二つの方法を書いて、分かりやすくします.
第一種類:手ぶれ防止(つまり転がりが終わってから実行する)
プレゼンテーション:
パッケージを閉じます:

/*
        
    @param fn function
    @param wait number
    @return function
*/
function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if(timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
//     
function handle() {
    console.log(Math.random()); 
}
//     
window.addEventListener('scroll', debounce(handle, 500));

直接書き:

var timeout = null;
window.addEventListener('scroll', function() {
    if(timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(function() {
        var scrollTop = this.scrollY;
        console.log(scrollTop);
    }.bind(this), 500);
});

二つ目は節流スクロール中の間隔で行われます.例えば、スクロールローディング画像の効果は、スクロールが終了するまでローディング関数を実行することはできないでしょう.ここでは間隔を作って実行できます.
プレゼンテーション:
パッケージを閉じます:

/*
        
    @param fn function
    @param wait number
    @param maxTimeLong number
    @return function
*/
function throttling(fn, wait, maxTimelong) {
    var timeout = null,
        startTime = Date.parse(new Date);

    return function() {
        if(timeout !== null) clearTimeout(timeout);
        var curTime = Date.parse(new Date);
        if(curTime-startTime>=maxTimelong) {
            fn();
            startTime = curTime;
        } else {
            timeout = setTimeout(fn, wait);
        }
    }
}

function handle() {
    console.log(Math.random()); 
}

window.addEventListener('scroll', throttling(handle, 300, 1000));

直接書き:

var timeout = null,
    startTime = Date.parse(new Date); //     

function handle() {
    console.log(Math.random()); 
}

window.addEventListener('scroll', function() {
    if(timeout !== null) clearTimeout(timeout);
    var curTime = Date.parse(new Date); //     
    if(curTime-startTime>=1000) { //    >=1     
        handle();
        startTime = curTime;
    } else { //       ，      ，  <1        
        timeout = setTimeout(handle, 300);
    }
});

このような事件はレスゼ事件もこの2つの方法を使っています.もちろんどちらを使うかはプロジェクトのニーズを見なければなりません.ありがとうございます