JavaScript防抖動與節流如何處理

今天小編給大家分享一下JavaScript防抖動與節流如何處理的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

針對一些會頻繁觸發的事件如scroll、resize，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續觸發事件，十分影響性能。

因此針對這類事件要進行防抖動或者節流處理

防抖動

它的做法是限制下次函數調用之前必須等待的時間間隔。正確實現 debouncing 的方法是將若干個函數調用合成 一次，并在給定時間過去之后僅被調用一次。

// 將會包裝事件的 debounce 函數
function debounce(fn, delay) {
  // 維護一個 timer
  let timer = null;
 
  return function() {
    // 通過 ‘this' 和 ‘arguments' 獲取函數的作用域和變量
    let context = this;
    let args = arguments;
 
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

// 當用戶滾動時被調用的函數
function foo() {
  console.log('You are scrolling!');
 
}
 
// 在 debounce 中包裝我們的函數，過 2 秒觸發一次
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));

首先，我們為scroll事件綁定處理函數，這時debounce函數會立即調用，因此給scroll事件綁定的函數實際上是debounce內部返回的函數

每一次事件被觸發，都會清除當前的 timer 然后重新設置超時調用。
這就會導致每一次高頻事件都會取消前一次的超時調用，導致事件處理程序不能被觸發

只有當高頻事件停止，最后一次事件觸發的超時調用才能在delay時間后執行
更進一步，我們不希望非要等到事件停止觸發后才執行，我希望立刻執行函數，然后等到停止觸發 n 秒后，才可以重新觸發執行。
這里增加一個immediate參數來設置是否要立即執行：

function debouce(func,delay,immediate){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(timer) clearTimeout(time);
        if(immediate){
            //根據距離上次觸發操作的時間是否到達delay來決定是否要現在執行函數
            var doNow = !timer;
            //每一次都重新設置timer，就是要保證每一次執行的至少delay秒后才可以執行
            timer = setTimeout(function(){
                timer = null;
            },delay);
            //立即執行
            if(doNow){
                func.apply(context,args);
            }
        }else{
            timer = setTimeout(function(){
                func.apply(context,args);
            },delay);
        }
    }
}

節流

節流是另一種處理類似問題的解決方法。
節流函數允許一個函數在規定的時間內只執行一次。

它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。

比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流閥技術來實現。

主要有兩種實現方法：

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();
        }
    }
}

當高頻事件觸發時，第一次應該會立即執行（給事件綁定函數與真正觸發事件的間隔如果大于delay的話），而后再怎么頻繁觸發事件，也都是會每delay秒才執行一次。而當最后一次事件觸發完畢后，事件也不會再被執行了。

定時器實現：

當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒后，定時器執行執行函數，清空定時器，這樣就可以設置下個定時器。

var throttle = fucntion(func,delay){
    var timer = null;
 
    return funtion(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context,args);
                timer = null;
            },delay);
        }
    }
}

當第一次觸發事件時，肯定不會立即執行函數，而是在delay秒后才執行。
之后連續不斷觸發事件，也會每delay秒執行一次。
當最后一次停止觸發后，由于定時器的delay延遲，可能還會執行一次函數。

可以綜合使用時間戳與定時器，完成一個事件觸發時立即執行，觸發完畢還能執行一次的節流函數：

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);
        }
    }
}

需要在每個delay時間中一定會執行一次函數，因此在節流函數內部使用開始時間、當前時間與delay來計算remaining，當remaining<=0時表示該執行函數了，如果還沒到時間的話就設定在remaining時間后再觸發。當然在remaining這段時間中如果又一次發生事件，那么會取消當前的計時器，并重新計算一個remaining來判斷當前狀態。

以上就是“JavaScript防抖動與節流如何處理”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。