JS進階篇1---函數(shù)節(jié)流（throttle）

zhou_you 發(fā)布于2019-08-23 18:18 / 2568人閱讀

摘要：主要實現(xiàn)思路就是通過定時器，通過設置延時時間，在第一次調用時，創(chuàng)建定時器，寫入需要執(zhí)行的函數(shù)。如果這時前一個定時器暫未執(zhí)行，則將其替換為新的定時器。

JS中的函數(shù)節(jié)流 一、什么是函數(shù)節(jié)流（throttle）

概念：限制一個函數(shù)在一定時間內只能執(zhí)行一次。

舉個栗子，坐火車或地鐵，過安檢的時候，在一定時間（例如10秒）內，只允許一個乘客通過安檢入口，以配合安檢人員完成安檢工作。上例中，每10秒內，僅允許一位乘客通過，分析可知，“函數(shù)節(jié)流”的要點在于，在 一定時間 之內，限制 一個動作 只 執(zhí)行一次 。

二、為什么需要函數(shù)節(jié)流

　　前端開發(fā)過程中，有一些事件或者函數(shù)，會被頻繁地觸發(fā)（短時間按內多次觸發(fā)），最常見的例如，onresize，scroll，mousemove ,mousehover 等，這些事件的觸發(fā)頻率很高，不做限制的話，有可能一秒之內執(zhí)行幾十次、幾百次，如果在這些函數(shù)內部執(zhí)行了其他函數(shù)，尤其是執(zhí)行了操作 DOM 的函數(shù)（瀏覽器操作 DOM 是很耗費性能的），那不僅會造成計算機資源的浪費，還會降低程序運行速度，甚至造成瀏覽器卡死、崩潰。這種問題顯然是致命的。

除此之外，重復的 ajax 調用不僅可能會造成請求數(shù)據(jù)的混亂，還會造成網(wǎng)絡擁塞，占用服務器帶寬，增加服務器壓力，顯然這個問題也是需要解決的。

三、函數(shù)節(jié)流如何解決上述問題

根據(jù)上面對問題的分析，細細思索，問題的解決方案就呼之欲出了。

主要實現(xiàn)思路就是通過 setTimeout 定時器，通過設置延時時間，在第一次調用時，創(chuàng)建定時器，寫入需要執(zhí)行的函數(shù)。第二次調用時，會清除前一個定時器并設置新的定時器。如果這時前一個定時器暫未執(zhí)行，則將其替換為新的定時器。目的在于在一定的時間內，保證多次函數(shù)的請求只執(zhí)行最后一次調用。

四、函數(shù)節(jié)流的代碼實現(xiàn)

根據(jù)以上分析，我們對“函數(shù)節(jié)流”進行代碼實現(xiàn)，如下：

（1）方法一：時間戳方案

// 時間戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

（2）方法二：定時器方案

// 定時器方案
function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

以上兩種方法本人都親自測試過，小伙伴們可以放心食用（注意，例子中函數(shù)觸發(fā)方式為“ mousemove ”，鼠標在頁面上移動，觀察瀏覽器控制臺的變化），自己運行代碼體驗后，自然會更深刻的理解 “函數(shù)節(jié)流” 。

五、函數(shù)節(jié)流的使用場景

到此為止，相信各位應該對函數(shù)節(jié)流有了一個比較詳細的了解，那函數(shù)節(jié)流一般用在什么情況之下呢？

懶加載、滾動加載、加載更多或監(jiān)聽滾動條位置；

百度搜索框，搜索聯(lián)想功能；

防止高頻點擊提交，防止表單重復提交；

目前遇到過的使用場景就是這些了，不過理解了原理，小伙伴可以把它運用在需要用到它的任何場合，提高代碼質量。

總結

使用“函數(shù)節(jié)流”的主要目的，是為了優(yōu)化程序性能，提高用戶體驗，不過最主要的為了節(jié)約計算機資源，推薦在合適的場合使用它，才能達到它應有的效果，切忌濫用哦！

此文是本人第一篇技術博客，前后參考查閱了很多資料，比較用心，希望對各位讀者有所幫助，有不足之處或者疑問之處各位也可以在評論區(qū)指正或者提出。后續(xù)會推出更多內容，期待和各位小伙伴的更多交流。^o^

GPU云服務器云服務器 js函數(shù)節(jié)流進階篇 webrtc進階信令篇 webrtc進階-信令篇

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/104998.html

JS進階篇--JS函數(shù)節(jié)流（throttle）

摘要：函數(shù)節(jié)流的原理函數(shù)節(jié)流的原理挺簡單的，估計大家都想到了，那就是定時器。在高級程序設計一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個函數(shù)節(jié)流函數(shù)，它把定時器存為函數(shù)的一個屬性個人的世界觀不喜歡這種寫法。什么是函數(shù)節(jié)流？介紹前，先說下背景。在前端開發(fā)中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特地搗亂...

cpupro 2019-08-20 16:41 評論0 收藏0
JS進階篇3---函數(shù)“節(jié)流” VS “防抖”

摘要：目的都是為了降低回調函數(shù)執(zhí)行頻率，節(jié)省計算機資源，優(yōu)化性能，提升用戶體驗。函數(shù)防抖事件頻繁觸發(fā)的情況下，只有經(jīng)過足夠的空閑時間，才執(zhí)行代碼一次。函數(shù)節(jié)流和函數(shù)防抖的對比分析一、前言前端開發(fā)中，函數(shù)節(jié)流（throttle）和函數(shù)防抖（debounce）作為常用的性能優(yōu)化方法，兩者都是用于優(yōu)化高頻率執(zhí)行 js 代碼的手段，那具體它們有什么異同點呢？有對這兩個概念不太了解的小伙伴...

hlcc 2019-08-23 18:21 評論0 收藏0
【進階 6-3 期】深入淺出節(jié)流函數(shù) throttle

摘要：引言上一節(jié)我們詳細聊了聊高階函數(shù)之柯里化，通過介紹其定義和三種柯里化應用，并在最后實現(xiàn)了一個通用的函數(shù)。第二種方案來實現(xiàn)也存在一個問題，因為定時器是延遲執(zhí)行的，所以事件停止觸發(fā)時必然會響應回調，所以時無法生效。引言上一節(jié)我們詳細聊了聊高階函數(shù)之柯里化，通過介紹其定義和三種柯里化應用，并在最后實現(xiàn)了一個通用的 currying 函數(shù)。這一小節(jié)會繼續(xù)之前的篇幅聊聊函數(shù)節(jié)流 thrott...

baishancloud 2019-08-26 13:58 評論0 收藏0
Javascript 面試中經(jīng)常被問到的三個問題！

摘要：相反，在討論時，面試中通常會提到三件事。通過對事件對應的回調函數(shù)進行包裹以自由變量的形式緩存時間信息，最后用來控制事件的觸發(fā)頻率。而認為最后一個參賽者說了算，只要還能吃的，就重新設定新的定時器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想閱讀更多優(yōu)質文章請猛戳GitHub博客,一年百來篇優(yōu)質文章等著你！本...

PrototypeZ 2019-08-23 15:34 評論0 收藏0
【前端詞典】5 種滾動吸頂實現(xiàn)方式的比較[性能升級版]

摘要：用于獲得當前元素到定位父級頂部的距離偏移值。后來在項目中總會遇到滾動吸頂?shù)男Ч枰獙崿F(xiàn)，現(xiàn)在我將我知道的種滾動吸頂實現(xiàn)方式做詳細介紹。有兼容性問題，在微信瀏覽器某些版本中的值會為，于是乎也就有了第三種方案的兼容性寫法。修改版預覽這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個意見確實中肯。所以就有了這個升級的修改版本。代碼同步更新到 GitHub 了。修改內容如下：添加...

happyfish 2019-05-23 17:31 評論0 收藏0