js中函數節流&函數去抖

王軍發布于2019-08-22 10:42 / 2892人閱讀

摘要：節流保證在一定時間內，只能觸發一次。我們在嘗試一下去抖消抖，消除抖動，感覺這個更好聽有沒有什么現成的上的一次發現源碼的經歷以及對學術界拿來主義的思考函數節流和函數去抖應用場景辨析函數去抖的實現

開篇先提幾個問題？

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

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

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

好了接下里我們來自己寫一個，嘗試一番

//先來個有問題的代碼
window.onscroll=function(){
    console.log(new Date());
}

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

//我們先來個節流,每秒輸出一次
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=true;
        console.log(new Date());
        setTimeout(function(){
            window.onScrollTag=undefined;
        },1000);
    }
}//先觸發
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=setTimeout(function(){
            window.onScrollTag=undefined;
             console.log(new Date());
        },1000);
       
    }
}//后觸發
//從上面的代碼可以看出來，我們在一個事件執行的時候就把標記改成不可用。一秒后才可以再次觸發操作。
//我們在嘗試一下去抖
window.onscroll=function(){
    if(window.onScrollTag != undefined){
        clearTimeout(window.onScrollTag);
    }
    window.onScrollTag=setTimeout(function(){
         console.log(new Date());
    },1000);
}//消抖，消除抖動，感覺這個更好聽

有沒有什么現成的？

underscore,github上的
一次發現underscore源碼bug的經歷以及對學術界『拿來主義』的思考
JavaScript 函數節流和函數去抖應用場景辨析
underscore 函數去抖的實現

云服務器 GPU云服務器 js函數節流函數節流 js中init函數 js中函數的調用、

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91109.html

JS中的函數去抖與節流

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

fuchenxuan 2019-08-23 10:49 評論0 收藏0
JS專題之節流函數

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

huaixiaoz 2019-08-23 14:01 評論0 收藏0
JS專題之去抖函數

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

ivydom 2019-08-23 13:57 評論0 收藏0
JavaScript 函數節流和函數去抖應用場景辨析

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

ZHAO_ 2019-08-21 14:35 評論0 收藏0