scroll優(yōu)化之防抖與節(jié)流

littleGrow 發(fā)布于2019-08-22 10:45 / 1038人閱讀

摘要：這個優(yōu)化方案是參照前端性能高性能滾動及頁面渲染優(yōu)化在這里簡單的把兩個方式寫出來，以便快速了解。。

這個優(yōu)化方案是參照【前端性能】高性能滾動 scroll 及頁面渲染優(yōu)化

在這里簡單的把兩個方式寫出來，以便快速了解。。

第一種：防抖（也就是滾動結(jié)束才執(zhí)行）

演示：

閉包：

/*
    延時執(zhí)行
    @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);
    }
}
// 處理函數(shù)
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);
});

第二個是節(jié)流（Throttling）滾動的過程中間隔執(zhí)行，例如滾動加載圖片效果，不可能等到滾動結(jié)束才執(zhí)行加載函數(shù)數(shù)吧，所以這里可以做一個間隔執(zhí)行。。

演示：

閉包：

/*
    節(jié)流函數(shù)
    @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); // 當(dāng)前時間
    if(curTime-startTime>=1000) { // 時間差>=1秒直接執(zhí)行
        handle();
        startTime = curTime;
    } else { // 否則延時執(zhí)行，像滾動了一下，差值<1秒的那種也要執(zhí)行
        timeout = setTimeout(handle, 300);
    }
});

諸如此類事件的還有resize事件都可以使用這兩種方式,當(dāng)然使用哪一種，還要看項目需求了。。謝謝關(guān)注~