欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript深入理解節(jié)流與防抖

 更新時間：2022年04月02日 18:03:28   作者：傲嬌味的草莓  
防抖和節(jié)流嚴格算起來應該屬于性能優(yōu)化的知識,但實際上遇到的頻率相當高,處理不當或者放任不管就容易引起瀏覽器卡死,下面這篇文章主要給大家介紹了關于JavaScript防抖與節(jié)流的實現與注意事項,需要的朋友可以參考下

一、js防抖和節(jié)流

在進行窗口的resize、scroll、輸出框內容校驗等操縱的時候，如果事件處理函數調用的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常之差。那么為了前端性能的優(yōu)化也為了用戶更好的體驗，就可以采用防抖（debounce）和節(jié)流（throttle）的方式來到達這種效果，減少調用的頻率。

二、為什么滾動scroll、窗口resize等事件需要優(yōu)化

滾動事件的應用很頻繁：圖片懶加載、下滑自動加載數據、側邊浮動導航欄等。

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

三、滾動和頁面渲染前端性能優(yōu)化的關系

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

review一下前端的渲染和優(yōu)化

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

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

四、防抖Debounce

1 防抖Debounce情景

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

②回調函數執(zhí)行的頻率過高也會有卡頓現象。 可以一段時間過后進行觸發(fā)去除無用操作

2 防抖原理

一定在事件觸發(fā) n 秒后才執(zhí)行，如果在一個事件觸發(fā)的 n 秒內又觸發(fā)了這個事件，以新的事件的時間為準，n 秒后才執(zhí)行，等觸發(fā)事件 n 秒內不再觸發(fā)事件才執(zhí)行。

官方解釋：當持續(xù)觸發(fā)事件時，一定時間段內沒有再觸發(fā)事件，事件處理函數才會執(zhí)行一次，如果設定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。

3 防抖函數簡單實現

    //簡單的防抖函數
    function debounce(func, wait, immediate) {
        //定時器變量
        var timeout;
        return function () {
            //每次觸發(fā)scrolle，先清除定時器
            clearTimeout(timeout);
            //指定多少秒后觸發(fā)事件操作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);
        };
    };

②立即觸發(fā)問題

    //首次觸發(fā)執(zhí)行，再次觸發(fā)以后開始執(zhí)行防抖函數
    //使用的時候不用重復執(zhí)行這個函數，本身返回的函數才具有防抖功能
function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        
        if(timeout) clearTimeout(timeout);
        // 是否在某一批事件中首次執(zhí)行
        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;
}

五、節(jié)流Throttle

1 節(jié)流Throttle情景

①圖片懶加載

②ajax數據請求加載

2 節(jié)流原理

如果持續(xù)觸發(fā)事件，每隔一段時間只執(zhí)行一次函數。

官方解釋：當持續(xù)觸發(fā)事件時，保證一定時間段內只調用一次事件處理函數。

3 節(jié)流實現—時間戳和定時器

時間戳

    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 節(jié)流函數的演化過程

①時間戳觸發(fā)

//在開始觸發(fā)時，會立即執(zhí)行一次； 如果最后一次沒有超過 wait 值，則不觸發(fā)
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;
        }
    }
}

②定時器觸發(fā)

//首次不會立即執(zhí)行，最后一次會執(zhí)行，和用時間戳的寫法互補。
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 保證在差值時間后執(zhí)行
        }
    }
}

六、節(jié)流防抖總結

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

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

區(qū)別：防抖只會在最后一次事件后執(zhí)行觸發(fā)函數，節(jié)流不管事件多么的頻繁，都會保證在規(guī)定時間段內觸發(fā)事件函數。

到此這篇關于JavaScript深入理解節(jié)流與防抖的文章就介紹到這了,更多相關JS 節(jié)流與防抖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論