scroll優化之防抖與節流

littleGrow 發布于2019-08-22 10:45 / 1025人閱讀

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

這個優化方案是參照【前端性能】高性能滾動 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);
});

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

演示：

閉包：

/*
    節流函數
    @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);
    }
});

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

GPU云服務器云服務器 VUE防抖與節流防抖 VUE防抖 scrolling

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91206.html

JS系列之防抖節流

摘要：概念函數節流和函數防抖，兩者都是優化高頻率執行代碼的一種手段。函數節流與函數防抖都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。節流指定時間間隔內，只會執行最后一次任務。概念函數節流和函數防抖，兩者都是優化高頻率執行js代碼的一種手段。函數節流（throttle）與函數防抖（debounce）都是為了限制函數的執行頻次...

everfight 2019-08-23 14:40 評論0 收藏0
[譯]通過實例講解Debouncing和Throtting(防抖與節流)

摘要：譯通過實例講解和防抖與節流源碼中推薦的文章，為了學習英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術投稿。首次或立即你可能發現防抖事件在等待觸發事件執行，直到事件都結束后它才執行。 [譯]通過實例講解Debouncing和Throtting(防抖與節流) lodash源碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文鏈接作者：DAVID CORBACHO 本文來自一位...

Jenny_Tong 2019-08-23 13:42 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0