js函數防抖和節流

js函數防抖和節流

在實際開發應用中，常常會碰到高頻率的事件處理，好比 window 的 scroll， resize 以及 keyup，mousemove 等事件。這些高頻率的事件觸發會帶來一些顯著的問題。 若是事件處理函數調用的頻率無限制，會加劇瀏覽器的負擔，致使用戶體驗很是糟糕。

• 高頻率的事件處理函數中，存在着大量的DOM操做，當瀏覽器的渲染速度跟不上事件觸發頻率，容易形成頁面卡頓，影響用戶體驗，甚至會形成 CPU 使用率太高致使頁面崩潰。

• 高頻率的事件處理函數中，每執行一次事件處理函數時，都須要和服務器通訊創建 HTTP 請求，好比頁面的搜索功能，那麼可能存在短期內發起了數十條 HTTP 請求的狀況，容易消耗服務器資源。

針對這些問題的解決方案，能夠採用函數防抖(debounce)和節流(throttle)的方案解決存在的問題，經過防抖和節流能夠將多個事件的觸發合併成一個，減小事件觸發頻率。 同時又不影響實際效果。

函數防抖

我的理解 函數防抖就是法師發技能的時候要讀條，技能讀條沒完再按技能就會從新讀條。

函數防抖(debounce) : 當持續觸發事件時，必定時間段內沒有再觸發事件，事件處理函數纔會執行一次，若是設定的時間到來以前，又一次觸發了事件，就從新開始延時。以下圖，持續觸發scroll事件時，並不執行handle函數，當1000毫秒內沒有觸發scroll事件時，纔會延時觸發scroll事件。

防抖代碼啊啊啊，監視窗口滾動事件

<script>
        function debounce(fn, wait) {
            var timeout = null;
            return function() {
                if(timeout !== null) 
                        clearTimeout(timeout);
                timeout = setTimeout(fn, wait);
            }
        }
        // 處理函數
        function handle() {
            console.log(Math.random()); 
        }
        // 滾動事件
        window.addEventListener('scroll', debounce(handle, 1000));
    </script>

　　

咱們能夠看到，當持續觸發scroll事件時，事件處理函數handle只在中止滾動1000毫秒以後纔會調用一次，也就是說在持續觸發scroll事件的過程當中，事件處理函數handle一直沒有執行。

函數節流

我的理解 函數節流就是fps遊戲的射速，就算一直按着鼠標射擊，也只會在規定射速內射出子彈。

函數節流：當持續觸發事件時，保證必定時間段內只調用一次事件處理函數。節流通俗解釋就好比咱們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉着勤儉節約的優良傳統美德，咱們要把水龍頭關小點，最好是如咱們心意按照必定規律在某個時間間隔內一滴一滴的往下滴。以下圖，持續觸發scroll事件時，並不當即執行handle函數，每隔1000毫秒纔會執行一次handle函數。

函數節流主要有兩種實現方法：時間戳和定時器。接下來分別用兩種方法實現throttle~

節流throttle代碼（時間戳）：

var throttle = function(func, delay) {
            var prev = Date.now();
            return function() {
                var context = this;
                var args = arguments;
                var now = Date.now();
                if (now - prev >= delay) {
                    func.apply(context, args);
                    prev = Date.now();
                }
            }
        }
        function handle() {
            console.log(Math.random());
     }
        window.addEventListener('scroll', throttle(handle, 1000));

　　

當高頻事件觸發時，第一次會當即執行（給scroll事件綁定函數與真正觸發事件的間隔通常大於delay，若是你非要在網頁加載1000毫秒之內就去滾動網頁的話，我也沒辦法o(╥﹏╥)o），然後再怎麼頻繁地觸發事件，也都是每delay時間才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了（最後一次觸發事件與倒數第二次觸發事件的間隔小於delay，爲何小於呢？由於大於就不叫高頻了呀(╹▽╹)）。

節流throttle代碼（定時器）:

var throttle = function(func, delay) { var timer = null; return function() { var context = this; var args = arguments; if (!timer) { timer = setTimeout(function() { func.apply(context, args); timer = null; }, delay); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));

 

當觸發事件的時候，咱們設置一個定時器，再次觸發事件的時候，若是定時器存在，就不執行，直到delay時間後，定時器執行執行函數，而且清空定時器，這樣就能夠設置下個定時器。當第一次觸發事件時，不會當即執行函數，而是在delay秒後才執行。然後再怎麼頻繁觸發事件，也都是每delay時間才執行一次。當最後一次中止觸發後，因爲定時器的delay延遲，可能還會執行一次函數。

節流中用時間戳或定時器都是能夠的。更精確地，能夠用時間戳+定時器，當第一次觸發事件時立刻執行事件處理函數，最後一次觸發事件後也還會執行一次事件處理函數。

節流throttle代碼（時間戳+定時器）

var throttle = function(func, delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(func, remaining); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));

 

在節流函數內部使用開始時間startTime、當前時間curTime與delay來計算剩餘時間remaining，當remaining<=0時表示該執行事件處理函數了（保證了第一次觸發事件就能當即執行事件處理函數和每隔delay時間執行一次事件處理函數）。若是還沒到時間的話就設定在remaining時間後再觸發（保證了最後一次觸發事件後還能再執行一次事件處理函數）。固然在remaining這段時間中若是又一次觸發事件，那麼會取消當前的計時器，並從新計算一個remaining來判斷當前狀態

總結

函數防抖：將幾回操做合併爲一此操做進行。原理是維護一個計時器，規定在delay時間後觸發函數，可是在delay時間內再次觸發的話，就會取消以前的計時器而從新設置。這樣一來，只有最後一次操做能被觸發。

函數節流：使得必定時間內只觸發一次函數。原理是經過判斷是否到達必定時間來觸發函數。

區別： 函數節流無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數，而函數防抖只是在最後一次事件後才觸發一次函數。 好比在頁面的無限加載場景下，咱們須要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操做時纔去請求數據。這樣的場景，就適合用節流技術來實現。

 

原文：(https://mp.weixin.qq.com/s/Vkshf-nEDwo2ODUJhxgzVA)