JS中的函數節流

JS中的函數節流

1、什麼是函數節流（throttle）

概念：限制一個函數在必定時間內只能執行一次。

舉個栗子，坐火車或者地鐵，過安檢的時候，在必定的時間（例如10秒）內，只容許一個經過安檢入口，以配合安檢人員完成安檢工做。上述例子中，每10秒內，僅容許一位乘客經過，經過例子可知，「函數節流」的要點在於，在 必定時間 以內，限制 一個動做 只 執行一次 。

2、爲何須要函數節流

　　前端開發過程當中，有一些函數，會被頻繁地觸發，最多見的例如，onresize，scroll，mousemove ,mousehover 等，這些事件的觸發頻率很高，不作限制的話，有可能一秒以內執行幾十次、幾百次，若是在這些函數內部執行了其餘函數，尤爲是執行了操做 DOM 的函數（瀏覽器操做 DOM 是很耗費性能的），那不只會形成計算機資源的浪費，還會下降程序運行速度，甚至形成瀏覽器卡死、崩潰。這種問題顯然是致命的。

除此以外，重複的 ajax 調用不只可能會形成請求數據的混亂，還會形成網絡擁塞，佔用服務器帶寬，增長服務器壓力，顯然這個問題也是須要解決的。

3、函數節流如何解決上述問題

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

主要實現思路就是經過 setTimeout 定時器，經過設置延時時間，在第一次調用時，建立定時器，寫入須要執行的函數。第二次調用時，會清除前一個定時器並設置新的定時器。若是這時前一個定時器暫未執行，則將其替換爲新的定時器。目的在於在必定的時間內，保證屢次函數的請求只執行最後一次調用。

4、函數節流的代碼實現

根據以上分析，咱們對「函數節流」進行代碼實現，以下：

（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("resize",throttle(handle,500));

（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("resize",throttle(handle,500));

以上兩種方法本人都親測有效哦，小夥伴們能夠放心食用（注意，例子中函數觸發方式爲「 resize 」，改變窗口大小，觀察瀏覽器控制檯的變化）。

5、函數節流的使用場景

到此爲止，相信各位應該對函數節流有了一個更深層次的瞭解，那函數節流通常用在什麼狀況之下呢？

1. 懶加載、滾動加載、加載更多或滾動條位置監聽；
2. 百度搜索框，搜索聯想功能；
3. 防止高頻點擊提交，防止表單重複提交；

目前遇到過的使用場景就是這些了，不過理解了原理，小夥伴能夠把它運用在須要用到它的任何場合，提升代碼質量。

總結

使用「函數節流」的主要目的，是爲了優化程序性能，提升用戶體驗，不過最主要的爲了節約計算機資源，推薦在合適的場合使用它，才能達到它應有的效果，切忌濫用哦！

此文是本人第一篇技術博客，先後參考查閱了不少資料，比較用心，但願對各位讀者有所幫助，有不足之處或者疑問之處各位也能夠在評論區指正或者提出。後續會推出更多內容，期待和各位小夥伴的更多交流。^o^