JavaScript之節流與防抖

wayneli 發布于2019-08-23 10:33 / 581人閱讀

摘要：個人博客原文地址背景我們在開發的過程中會經常使用如等事件，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。

個人博客原文地址

背景

我們在開發的過程中會經常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。
因此針對這類事件要進行節流或者防抖處理

節流

節流的意思是，在規定的時間內只會觸發一次函數，如我們設置函數500ms觸發一次，之后你無論你觸發了多少次函數，在這個時間內也只會有一次執行效果

先來看一個例子

https://codepen.io/wclimb/pen...

我們看到使用了節流的在1000ms內只觸發了一次，而沒有使用節流的則頻繁觸發了調用的函數

接下來看看代碼實現
v1 第一次不觸發，不傳參實現

function throttle(fn,interval){
    var timer;
    return function(){
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn()
        }, interval || 1000);
    }   
}

效果是實現了，但是我在嘗試在執行函數里console.log(this)，結果發現this指向的是window，而且還發現我們不能傳遞參數，下面就來改進一下

v2 第一次觸發函數，接收參數

function throttle(fn,interval){
    var timer,
        isFirst = true;
    return function(){
        var args = arguments,
            that = this;
        if(isFirst){
            fn.apply(that,args)
            return isFirst = false
        }
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn.apply(that,args)
        }, interval || 1000);
    }   
}

防抖

防抖的意思是無論你觸發多少次函數，只會觸發最后一次函數。最常用的就是在表單提交的時候，用戶可能會一段時間內點擊很多次，這個時候可以增加防抖處理，我們只需要最后一次觸發的事件

先來看一個例子

https://codepen.io/wclimb/pen...

我們看到使用了防抖的方框，無論你在里面觸發了多少次函數，都只會觸發最后的那一次函數，而沒有使用防抖的則頻繁觸發了調用的函數

v1 第一次不觸發函數

function debounce(fn,interval){
    var timer;
    return function(){
        var args = arguments,
            that = this;
        if(timer){
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(() => {
            fn.apply(null,args)
        }, interval || 1000);
    }
}

上面這段代碼仍然可以正常執行，但是我們并沒有指定他的this

v2 第一次就觸發函數

function debounce(fn,interval){
    var timer,
        isFirst  = true,
            can = false;
    return function(){
        var args = arguments,
            that = this;
        if(timer){
            clearTimeout(timer)
            timer = null
        }
        if(isFirst){
            fn.apply(that,args)
            isFirst = false
            setTimeout(() => {
                can = true
            }, interval || 1000);
        }else if(can){
            timer = setTimeout(() => {
                fn.apply(null,args)
            }, interval || 1000);
        }
    }
}

如有雷同，純屬抄我（開玩笑）

如有錯誤，還望指正，僅供參考

GitHub：wclimb

GPU云服務器云服務器 VUE防抖與節流防抖 VUE防抖函數節流

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

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

理解節流與防抖

摘要：節流節流限制了一個函數可以在短時間內被調用的次數。更新防抖防抖確保了一個函數只有在一個固定時間段內沒有被調用過后，才會再次被調用。再換句話說防抖會等待事件不再高頻發生，再觸發。這個網站很好的可視化了節流與防抖。節流 Throttling 節流限制了一個函數可以在短時間內被調用的次數。可以這樣形容：在一毫秒內最多執行此函數 1 次。 Throttling enforces a maxi...

glumes 2019-08-23 15:26 評論0 收藏0
The debounce & throttle in Javascript（防抖與節流）

摘要：您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。一些文章中的與上面所談到的設置類似。防抖防抖技術允許我們捆綁多個連續調用成為單一的一次調用。防抖的應用這個簡單的舉個歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。節流[throttle]與防抖[debounce]在前...

XboxYan 2019-08-23 12:46 評論0 收藏0
淺談節流與防抖

摘要：節流和防抖在開發項目過程中很常見，例如輸入實時搜索滾動更新了，等等，大量的場景需要我們對其進行處理。防抖多次觸發，只在最后一次觸發時，執行目標函數。節流限制目標函數調用的頻率，比如內不能調用次。節流和防抖在開發項目過程中很常見，例如 input 輸入實時搜索、scrollview 滾動更新了，等等，大量的場景需要我們對其進行處理。我們由 Lodash 來介紹，直接進入主題吧。 Lod...

thursday 2019-08-26 10:17 評論0 收藏0
從lodash源碼學習節流與防抖

摘要：首先重置防抖函數最后調用時間，然后去觸發一個定時器，保證后接下來的執行。這就避免了手動管理定時器。 ??之前遇到過一個場景，頁面上有幾個d3.js繪制的圖形。如果調整瀏覽器可視區大小，會引發圖形重繪。當圖中的節點比較多的時候，頁面會顯得異常卡頓。為了限制類似于這種短時間內高頻率觸發的情況，我們可以使用防抖函數。 ??實際開發過程中，這樣的情況其實很多，比如：頁面的scroll事件 ...

CloudDeveloper 2019-08-26 11:59 評論0 收藏0
節流 - 理解，實踐與實現

摘要：節流分流，與防抖去抖實現原理相似。本文主要討論節流，鏡像文章防抖理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解節流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節流模式，每一次觸發都會繪制一個圓點。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節流(分流)，與防抖（去抖）實現原理相似。本文主...

layman 2019-08-26 13:41 評論0 收藏0