亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

王軍 / 2945人閱讀

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

開篇先提幾個問題？

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

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

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

好了接下里我們來自己寫一個，嘗試一番 
//先來個有問題的代碼
window.onscroll=function(){
    console.log(new Date());
}


看控制臺的輸出。知道這個有多么的恐怖了吧。

//我們先來個節(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ā)
//從上面的代碼可以看出來，我們在一個事件執(zhí)行的時候就把標(biāo)記改成不可用。一秒后才可以再次觸發(fā)操作。
//我們在嘗試一下去抖
window.onscroll=function(){
    if(window.onScrollTag != undefined){
        clearTimeout(window.onScrollTag);
    }
    window.onScrollTag=setTimeout(function(){
         console.log(new Date());
    },1000);
}//消抖，消除抖動，感覺這個更好聽
有沒有什么現(xiàn)成的？

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

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

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

相關(guān)文章

  • JS中的函數(shù)去抖與節(jié)流

    摘要：上段代碼的一個問題是，事件會在定時器結(jié)束后被觸發(fā)，因此會出現(xiàn)一定的延遲，如果想讓事件被立即觸發(fā)，可以使用以下的去抖函數(shù)但是，對于去抖來說，在某些場景下是不合適的，因此我們可以使用節(jié)流。 參考文章游戲星人眼中的節(jié)流與去抖（很生動） 函數(shù)去抖與節(jié)流 Debounce：函數(shù)去抖就是對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次Throttle：函數(shù)節(jié)流就是讓連續(xù)執(zhí)行的函數(shù)，變成固定時間段間斷...

    fuchenxuan 評論0 收藏0

  • JS專題之節(jié)流函數(shù)

    摘要：一什么是節(jié)流節(jié)流函數(shù)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會按每小段固定時間一次的頻率執(zhí)行。我們通過一個簡單的示意來理解節(jié)流函數(shù)可以用時間戳和定時器兩種方式進(jìn)行處理。 本文共 2000 字，讀完只需 8 分鐘 上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。 一、什么是節(jié)流？ 節(jié)流函數(shù)（thrott...

    huaixiaoz 評論0 收藏0

  • JS專題之去抖函數(shù)

    摘要：如果本次定時器沒有被清除，時間到后就會自然執(zhí)行事件處理函數(shù)。綁定去抖后的事件回調(diào)函數(shù)綁定回調(diào)函數(shù)的屬性方法，點擊頁面，重置去抖效果異步請求清空上一次事件觸發(fā)的定時器重置為從而下一次事件觸發(fā)就能立即執(zhí)行。 一、前言 為什么會有去抖和節(jié)流這類工具函數(shù)？ 在用戶和前端頁面的交互過程中，很多操作的觸發(fā)頻率非常高，比如鼠標(biāo)移動 mousemove 事件, 滾動條滑動 scroll 事件, 輸...

    ivydom 評論0 收藏0

  • JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析

    摘要：函數(shù)節(jié)流和去抖的出現(xiàn)場景，一般都伴隨著客戶端的事件監(jiān)聽。函數(shù)節(jié)流的核心是，讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流。 概述 也是好久沒更新 源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎） 言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會涉及具體的代碼實現(xiàn)（關(guān)于代碼實現(xiàn)請期...

    ZHAO_ 評論0 收藏0

發(fā)表評論

0條評論

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