js中函數(shù)節(jié)流&函數(shù)去抖

王軍發(fā)布于2019-08-22 10:42 / 2888人閱讀

摘要：節(jié)流保證在一定時(shí)間內(nèi)，只能觸發(fā)一次。我們?cè)趪L試一下去抖消抖，消除抖動(dòng)，感覺(jué)這個(gè)更好聽(tīng)有沒(méi)有什么現(xiàn)成的上的一次發(fā)現(xiàn)源碼的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)去抖的實(shí)現(xiàn)

開(kāi)篇先提幾個(gè)問(wèn)題？

1.做搜索框的時(shí)候你使用什么事件？change?blur?keyup？你想要的效果是什么？
2.scroll事件怎么就觸發(fā)？是滾一段距離觸發(fā)一次？還是滾一圈觸發(fā)一次？還是滾一次觸發(fā)一次？你想要那種？
3.mouseover事件是怎么觸發(fā)呢？

帶著我們的問(wèn)題我們研究一下 throttle & debounce 是什么意思。

1.throttle節(jié)流，scroll和mouseover亦或者其他方式，每次移動(dòng)都會(huì)觸發(fā)代碼效果，但是這些效果太密集了，占用了系統(tǒng)資源，計(jì)算機(jī)的計(jì)算能力是有限的，我們寫(xiě)的代碼應(yīng)該盡可能的優(yōu)雅。
2.debounce去抖，本意是從按鍵去抖過(guò)來(lái)的，讓我們的用戶正確的操作之后才去執(zhí)行代碼，且只會(huì)執(zhí)行一次，比如當(dāng)我們做文本輸入的時(shí)候，如果用keyup我們不是去節(jié)流，而是去判斷用戶停止了輸入。
3.節(jié)流保證在一定時(shí)間內(nèi)，只能觸發(fā)一次。如果我們只要觸發(fā)一次，這就是去抖。代碼上來(lái)看差距不是很大。

好了接下里我們來(lái)自己寫(xiě)一個(gè)，嘗試一番

//先來(lái)個(gè)有問(wèn)題的代碼
window.onscroll=function(){
    console.log(new Date());
}

看控制臺(tái)的輸出。知道這個(gè)有多么的恐怖了吧。

//我們先來(lái)個(gè)節(jié)流,每秒輸出一次
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=true;
        console.log(new Date());
        setTimeout(function(){
            window.onScrollTag=undefined;
        },1000);
    }
}//先觸發(fā)
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=setTimeout(function(){
            window.onScrollTag=undefined;
             console.log(new Date());
        },1000);
       
    }
}//后觸發(fā)
//從上面的代碼可以看出來(lái)，我們?cè)谝粋€(gè)事件執(zhí)行的時(shí)候就把標(biāo)記改成不可用。一秒后才可以再次觸發(fā)操作。
//我們?cè)趪L試一下去抖
window.onscroll=function(){
    if(window.onScrollTag != undefined){
        clearTimeout(window.onScrollTag);
    }
    window.onScrollTag=setTimeout(function(){
         console.log(new Date());
    },1000);
}//消抖，消除抖動(dòng)，感覺(jué)這個(gè)更好聽(tīng)

有沒(méi)有什么現(xiàn)成的？

underscore,github上的
一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對(duì)學(xué)術(shù)界『拿來(lái)主義』的思考
JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析
underscore 函數(shù)去抖的實(shí)現(xiàn)