2019.04.04 防抖和節(jié)流

SegmentFault 發(fā)布于2019-08-23 17:57 / 672人閱讀

摘要：只記錄簡(jiǎn)單實(shí)現(xiàn)方法用以明白原理防抖，去抖動(dòng)。周期結(jié)束后，又有事件觸發(fā)，開始新的周期。節(jié)流策略也分前緣和延遲兩種。簡(jiǎn)單版定時(shí)器期間，只執(zhí)行最后一次操作

只記錄簡(jiǎn)單實(shí)現(xiàn)方法、用以明白原理

防抖

debounce，去抖動(dòng)。策略是當(dāng)事件被觸發(fā)時(shí)，設(shè)定一個(gè)周期延遲執(zhí)行動(dòng)作，若期間又被觸發(fā)，則重新設(shè)定周期，直到周期結(jié)束，執(zhí)行動(dòng)作。 這是debounce的基本思想，在后期又?jǐn)U展了前緣debounce，即執(zhí)行動(dòng)作在前，然后設(shè)定周期，周期內(nèi)有事件被觸發(fā)，不執(zhí)行動(dòng)作，且周期重新設(shè)定

// 暴力版： 定時(shí)器期間，有新操作時(shí)，清空舊定時(shí)器，重設(shè)新定時(shí)器
var debounce = (fn, wait) => {
    let timer, timeStamp=0;
    let context, args;
 
    let run = ()=>{
        timer= setTimeout(()=>{
            fn.apply(context,args);
        },wait);
    }
    let clean = () => {
        clearTimeout(timer);
    }
 
    return function(){
        context=this;
        args=arguments;
        let now = (new Date()).getTime();
 
        if(now-timeStamp < wait){
            console.log("reset",now);
            clean();  // clear running timer 
            run();    // reset new timer from current time
        }else{
            console.log("set",now);
            run();    // last timer alreay executed, set a new timer
        }
        timeStamp=now;
 
    }
 
}

節(jié)流

throttling，節(jié)流的策略是，固定周期內(nèi)，只執(zhí)行一次動(dòng)作，若有新事件觸發(fā)，不執(zhí)行。周期結(jié)束后，又有事件觸發(fā)，開始新的周期。 節(jié)流策略也分前緣和延遲兩種。與debounce類似，延遲是指 周期結(jié)束后執(zhí)行動(dòng)作，前緣是指執(zhí)行動(dòng)作后再開始周期。

// 簡(jiǎn)單版： 定時(shí)器期間，只執(zhí)行最后一次操作
var throttling = (fn, wait) => {
    let timer;
    let context, args;
 
    let run = () => {
        timer=setTimeout(()=>{
            fn.apply(context,args);
            clearTimeout(timer);
            timer=null;
        },wait);
    }
 
    return function () {
        context=this;
        args=arguments;
        if(!timer){
            console.log("throttle, set");
            run();
        }else{
            console.log("throttle, ignore");
        }
    }
 
}

GPU云服務(wù)器云服務(wù)器 VUE防抖與節(jié)流防抖 VUE防抖函數(shù)節(jié)流

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104424.html

相關(guān)文章

詳談js防抖和節(jié)流

摘要：本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場(chǎng)景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。本文由小芭樂發(fā)表 0. 引入首先舉一個(gè)例子：模擬在輸入框輸入后做ajax查詢請(qǐng)求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評(píng)論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評(píng)論0 收藏0
函數(shù)防抖和節(jié)流

摘要：應(yīng)用場(chǎng)景給按鈕加函數(shù)防抖防止表單多次提交。對(duì)于輸入框連續(xù)輸入進(jìn)行驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。參考十分鐘學(xué)會(huì)防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流防抖對(duì)于觸發(fā)非常頻繁又沒有必要每次都執(zhí)行的事件，希望合并到一次去執(zhí)行；實(shí)現(xiàn)思路：事件觸發(fā)后，在規(guī)定的時(shí)間范圍內(nèi)如果事件重復(fù)觸發(fā)，那么忽略之前觸發(fā)的事件，并且重新開始計(jì)時(shí)，直到某一次事件觸發(fā)后大于規(guī)定時(shí)間，我們才執(zhí)...

daydream 2019-08-23 16:50 評(píng)論0 收藏0
JavaScript防抖和節(jié)流

摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)一定時(shí)間內(nèi)方法只跑一次。概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流：指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任...

DevWiki 2019-08-23 17:09 評(píng)論0 收藏0
函數(shù)的防抖和節(jié)流是個(gè)啥？？？

摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個(gè)函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個(gè)函數(shù)，將目標(biāo)函數(shù)作為回調(diào)傳進(jìn)去，等待一段時(shí)間過后執(zhí)行目標(biāo)函數(shù)第二點(diǎn)實(shí)現(xiàn)了，再看第一點(diǎn)持續(xù)觸發(fā)不執(zhí)行。曾經(jīng)面試時(shí)候被問到過這個(gè)，年少的我一臉無知。。。后來工作中遇到了一個(gè)場(chǎng)景：輸入名稱的同時(shí)去服務(wù)器校驗(yàn)名稱是否重復(fù)，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請(qǐng)求。簡(jiǎn)直忍不了，就在項(xiàng)目的u...

edagarli 2019-08-23 18:35 評(píng)論0 收藏0