JavaScript深入理解節流與防抖

2022-04-02 22:00:08

一、js防抖和節流

在進行視窗的resize、scroll、輸出框內容校驗等操縱的時候，如果事件處理常式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常之差。那麼為了前端效能的優化也為了使用者更好的體驗，就可以採用防抖（debounce）和節流（throttle）的方式來到達這種效果，減少呼叫的頻率。

二、為什麼捲動scroll、視窗resize等事件需要優化

捲動事件的應用很頻繁：圖片懶載入、下滑自動載入資料、側邊浮動導航欄等。

在繫結scroll、resize事件時，但它發生的時候，它被觸發的頻率非常高，間隔很近。在日常開發的頁面中，事件中涉及到的大量的位置計算、DOM操作、元素重繪等等這些都無法在下一個scroll事件出發前完成的情況下，瀏覽器會卡幀。

三、捲動和頁面渲染前端效能優化的關係

為什麼捲動需要優化？前面提到了事件中涉及到大量的位置計算、DOM操作、元素重繪等等，這些又與頁面的渲染有關係，頁面渲染又與前端的效能優化有關係？套娃一樣，一層套著一層，每一層都聯絡緊密，每一層都如此平凡且重要。

review一下前端的渲染和優化

web頁面展示經歷的步驟：js—style—layout—paint—composite，簡單回顧一下，在這裡不做詳細的介紹哦！

網頁生成的時候，至少會渲染（Layout+Paint）一次。使用者存取的過程中，還會不斷重新的重排（reflow）和重繪（repaint），使用者scroll行為和resize行為會導致頁面不斷的進行重新渲染，而且間隔頻繁，容易造成瀏覽器卡幀。

四、防抖Debounce

1 防抖Debounce情景

①有些場景事件觸發的頻率過高（mousemove onkeydown onkeyup onscroll）

②回撥函數執行的頻率過高也會有卡頓現象。可以一段時間過後進行觸發去除無用操作

2 防抖原理

一定在事件觸發 n 秒後才執行，如果在一個事件觸發的 n 秒內又觸發了這個事件，以新的事件的時間為準，n 秒後才執行，等觸發事件 n 秒內不再觸發事件才執行。

官方解釋：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理常式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

3 防抖函數簡單實現

    //簡單的防抖函數
    function debounce(func, wait, immediate) {
        //定時器變數
        var timeout;
        return function () {
            //每次觸發scrolle，先清除定時器
            clearTimeout(timeout);
            //指定多少秒後觸發事件操作handler
            timeout = setTimeout(func, wait);
        };
    };
    //繫結在scrolle事件上的handler
    function handlerFunc() {
        console.log('Success');
    }
    //沒采用防抖動
    window.addEventListener('scroll', handlerFunc);
    //採用防抖動
    window.addEventListener('scrolle', debounce(handlerFunc, 1000));

4 防抖函數的演化過程

①this event繫結問題

    //以閉包的形式返回一個函數，內部解決了this指向的問題，event物件傳遞的問題
    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        };
    };

②立即觸發問題

    //首次觸發執行，再次觸發以後開始執行防抖函數
    //使用的時候不用重複執行這個函數，本身返回的函數才具有防抖功能
function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        
        if(timeout) clearTimeout(timeout);
        // 是否在某一批事件中首次執行
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function() {
                timeout = null;
                func.apply(context, args)
                immediate = true;
            }, wait);
            if (callNow) {
                func.apply(context, args)
            }
            immediate = false;
        } else {
            timeout = setTimeout(function() {
                func.apply(context, args);
                immediate = true;
            }, wait);
        }
    }
}

③返回值問題

function debounce(func, wait, immediate) {
    var timeout, result;
    return function () {
        var context = this, args = arguments;
        if (timeout)  clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function() {
                result = func.apply(context, args)
            }, wait);
            if (callNow) result = func.apply(context, args);
        } else {
            timeout = setTimeout(function() {
                result = func.apply(context, args)
            }, wait);
        }
        return result;
    }
}

④取消防抖，新增cancel方法

function debounce(func, wait, immediate) {
    var timeout, result;
    function debounced () {
        var context = this, args = arguments;
        if (timeout)  clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function() {
                result = func.apply(context, args)
            }, wait);
            if (callNow) result = func.apply(context, args);
        } else {
            timeout = setTimeout(function() {
                result = func.apply(context, args)
            }, wait);
        }
        return result;
    }
    debounced.cancel = function(){
        cleatTimeout(timeout);
        timeout = null;
    }
    return debounced;
}

五、節流Throttle

1 節流Throttle情景

①圖片懶載入

②ajax資料請求載入

2 節流原理

如果持續觸發事件，每隔一段時間只執行一次函數。

官方解釋：當持續觸發事件時，保證一定時間段內只呼叫一次事件處理常式。

3 節流實現—時間戳和定時器

時間戳

    var throttle = function (func, delay) {
        var prev = Date.now()
        return function () {
            var context = this;
            var args = arguments;
            var now = Date.now();
            if (now - prev >= delay) {
                func.apply(context, args);
                prev = Date.now();
            }
        }
    }

    function handle() {
        console.log(Math.random());
    }
    window.addEventListener('scroll', throttle(handle, 1000));

定時器

    var throttle = function (func, delay) {
        var timer = null;
        return function () {
            var context = this;
            var args = arguments;
            if (!timer) {
                timer = setTimeout(function () {
                    func.apply(context, args);
                    timer = null;
                }, delay);
            }
        }
    }

    function handle() {
        console.log(Math.random());
    }
    window.addEventListener('scroll', throttle(handle, 1000))

4 節流函數的演化過程

①時間戳觸發

//在開始觸發時，會立即執行一次； 如果最後一次沒有超過 wait 值，則不觸發
function throttle(func, wait) {
    var context, args;
    var previous = 0; // 初始的時間點，也是關鍵的時間點

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

②定時器觸發

//首次不會立即執行，最後一次會執行，和用時間戳的寫法互補。
function throttle(func, wait){
    var context, args, timeout;
    return function() {
        context = this;
        args = arguments;
        if(!timeout) {
            timeout = setTimeout(function(){
                func.apply(context, args);
                timeout = null;
            }, wait);
        }
    }
}

③結合時間戳和定時器

function throttle(func, wait) {

    var timer = null;
    var startTime = Date.now();  

    return function(){
        var curTime = Date.now();
        var remaining = wait-(curTime-startTime); 
        var context = this;
        var args = arguments;

        clearTimeout(timer);

        if(remaining<=0){ 
            func.apply(context, args);

            startTime = Date.now();

        }else{
            timer = setTimeout(fun, remaining);  // 如果小於wait 保證在差值時間後執行
        }
    }
}

六、節流防抖總結

防抖：原理是維護一個定時器，將很多個相同的操作合併成一個。規定在delay後觸發函數，如果在此之前觸發函數，則取消之前的計時重新計時，只有最後一次操作能被觸發。

節流：原理是判斷是否達到一定的時間來觸發事件。某個時間段內只能觸發一次函數。

區別：防抖只會在最後一次事件後執行觸發函數，節流不管事件多麼的頻繁，都會保證在規定時間段內觸發事件函數。

到此這篇關於JavaScript深入理解節流與防抖的文章就介紹到這了,更多相關JS 節流與防抖內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！