成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 函數(shù)節(jié)流 throttle 和防抖 debounce

mmy123456 / 1250人閱讀

摘要：今天和別人聊到函數(shù)的節(jié)流和防抖，發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊，遂小小實(shí)踐一下，在此記錄，希望對需要的人有所幫助。防抖實(shí)現(xiàn)順利，但是兩個節(jié)流方法的執(zhí)行結(jié)果存在差異。

今天和別人聊到JavaScript函數(shù)的節(jié)流和防抖，發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊，遂小小實(shí)踐一下，在此記錄，希望對需要的人有所幫助。

節(jié)流 - 頻繁操作，間隔一定時間去做一件事

舉例說明：假定時間間隔為 500ms，頻繁不停的操作 2s，且每兩次執(zhí)行時間小于等于時間間隔 500ms，那么就會執(zhí)行 4 次，也就是每隔 時間間隔 500ms 執(zhí)行一次。

防抖 - 頻繁操作，一定時間間隔內(nèi)只執(zhí)行最后一次操作

舉例說明：假定時間間隔是 500ms，頻繁不停的操作 5s，且每兩次執(zhí)行時間小于等于時間間隔 500ms，那么最后只執(zhí)行了 1 次，也就是每一次執(zhí)行時都結(jié)束了上一次的執(zhí)行。

代碼示例 
    //節(jié)流方法 1
    function throttle1(method, duration){
        var prevTime = new Date();
        return function () {
            var context = this,
                currentTime = new Date(),
                resTime = currentTime - prevTime;
            //打印出本次調(diào)用方法和上次執(zhí)行方法的時間差
            console.log("時間差"+resTime);
            //當(dāng)本次調(diào)用距離上次執(zhí)行方法的時間差大于等于要求時間間隔時，執(zhí)行一次方法
            if(resTime >= duration){
                method.apply(context);
                //記錄執(zhí)行方法的時間
                prevTime = currentTime;
            }
        }
    }
    //節(jié)流方法 2
    function throttle2(method, duration){
        //當(dāng)前時間間隔內(nèi)是否有方法在執(zhí)行（或者說方法的調(diào)用是否在進(jìn)行）
        var runningFlag = false;
        return function (e) {
            // 判斷當(dāng)前是否有方法在執(zhí)行，有，則什么都不做
            if (runningFlag) {
                return false;
            }
            //開始執(zhí)行
            runningFlag = true;
            setTimeout(function(){
                method(e);
                //執(zhí)行完畢，聲明當(dāng)前沒有正在執(zhí)行的方法，方便下一個時間間隔內(nèi)的調(diào)用
                runningFlag = false;
            }, duration)
        }
    }
    //防抖
    function debounce(method, duration){
        var timer = null;
        return function(){
            var context = this,
                args = arguments;
            //在本次調(diào)用之前的一個間隔時間內(nèi)，有方法在執(zhí)行，則終止該方法的執(zhí)行
            if(timer){
                clearTimeout(timer);
            }
            //開始執(zhí)行本次調(diào)用
            timer = setTimeout(function(){
                method.apply(context, args);
            },duration);
        }
    }
    //模擬三個執(zhí)行方法
    function jieliu1(){
        console.log("節(jié)流 1");
    }
    function jieliu2(){
        console.log("節(jié)流 2");
    }
    function fangdou(){
        console.log("防抖");
    }
    //持續(xù)執(zhí)行時間
    var totalTime = 2000;

    var jieliuFn1 = throttle1(jieliu1,500);
    var jieliuFn2 = throttle2(jieliu2,500);
    var fangdouFn = debounce(fangdou,500);

    (function(duration){
        setInterval(function(){
            if( totalTime > 0 ){
                jieliuFn1();
                jieliuFn2();
                fangdouFn();
                totalTime -= duration;
            }
        },duration);
    })(100);
運(yùn)行結(jié)果 
時間差 100
時間差 201
時間差 303
時間差 401
時間差 504
 節(jié)流 1
時間差 98
 節(jié)流 2
時間差 199
時間差 300
時間差 396
時間差 496
時間差 597
 節(jié)流 1
時間差 100
 節(jié)流 2
時間差 203
時間差 299
時間差 402
時間差 500
 節(jié)流 1
時間差 103
時間差 204
 節(jié)流 2
時間差 303
時間差 400
 節(jié)流 2
 防抖
結(jié)論

由以上運(yùn)行結(jié)果可以看出，節(jié)流1 出現(xiàn)了 3 次，節(jié)流2 出現(xiàn)了 4 次，防抖出現(xiàn)了 1 次。防抖實(shí)現(xiàn)順利，但是兩個節(jié)流方法的執(zhí)行結(jié)果存在差異。
觀察時間差可以看出，每次節(jié)流1 執(zhí)行時，時間差并不會都是 500 整，也就是說，一共調(diào)用 2 秒時，節(jié)流1 并不能做到每隔 500 毫秒執(zhí)行一次而共執(zhí)行 4 次，第四次執(zhí)行往往因?yàn)榍懊娴?3 次執(zhí)行的時間誤差，而導(dǎo)致到達(dá)時間 2 秒時，最后一次的時間差無法達(dá)到 時間間隔 500ms 以上，以至于只能執(zhí)行 3 次。

結(jié)論：當(dāng)在一個大范圍的時間內(nèi)，比如兩小時內(nèi)，每幾分鐘執(zhí)行一次，超過2小時則不再實(shí)行，推薦使用第一種節(jié)流方式，；如果僅僅要求間隔一定時間執(zhí)行一次，推薦使用第二種節(jié)流方法；防止頻繁操作，比如表單多次提交，推薦使用防抖。

如有問題，歡迎指正，謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93789.html

相關(guān)文章

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實(shí)現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實(shí)現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    張紅新 評論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實(shí)現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實(shí)現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    lieeps 評論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實(shí)現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實(shí)現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    shery 評論0 收藏0

  • 函數(shù)節(jié)流和防抖

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。然而，如果前一個定時器尚未執(zhí)行，其實(shí)就是將其替換為一個新的定時器，然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶，有些情況下會產(chǎn)生問題： 向后臺發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評論0 收藏0

  • 函數(shù)節(jié)流和防抖

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。然而，如果前一個定時器尚未執(zhí)行，其實(shí)就是將其替換為一個新的定時器，然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶，有些情況下會產(chǎn)生問題： 向后臺發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    huaixiaoz 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<