針對(duì)一些會(huì)頻繁觸發(fā)的事件如scroll、resize，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。

因此針對(duì)這類事件要進(jìn)行防抖動(dòng)或者節(jié)流處理

防抖動(dòng)

它的做法是限制下次函數(shù)調(diào)用之前必須等待的時(shí)間間隔。正確實(shí)現(xiàn) debouncing 的方法是將若干個(gè)函數(shù)調(diào)用合成 一次，并在給定時(shí)間過(guò)去之后僅被調(diào)用一次。

// 將會(huì)包裝事件的 debounce 函數(shù)
function debounce(fn, delay) {
  // 維護(hù)一個(gè) timer
  let timer = null;
 
  return function() {
    // 通過(guò) ‘this' 和 ‘a(chǎn)rguments' 獲取函數(shù)的作用域和變量
    let context = this;
    let args = arguments;
 
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

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

首先，我們?yōu)閟croll事件綁定處理函數(shù)，這時(shí)debounce函數(shù)會(huì)立即調(diào)用，因此給scroll事件綁定的函數(shù)實(shí)際上是debounce內(nèi)部返回的函數(shù)

每一次事件被觸發(fā)，都會(huì)清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用。
這就會(huì)導(dǎo)致每一次高頻事件都會(huì)取消前一次的超時(shí)調(diào)用，導(dǎo)致事件處理程序不能被觸發(fā)

只有當(dāng)高頻事件停止，最后一次事件觸發(fā)的超時(shí)調(diào)用才能在delay時(shí)間后執(zhí)行
更進(jìn)一步，我們不希望非要等到事件停止觸發(fā)后才執(zhí)行，我希望立刻執(zhí)行函數(shù)，然后等到停止觸發(fā) n 秒后，才可以重新觸發(fā)執(zhí)行。
這里增加一個(gè)immediate參數(shù)來(lái)設(shè)置是否要立即執(zhí)行：

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

節(jié)流

節(jié)流是另一種處理類似問(wèn)題的解決方法。
節(jié)流函數(shù)允許一個(gè)函數(shù)在規(guī)定的時(shí)間內(nèi)只執(zhí)行一次。

它和防抖動(dòng)最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

比如在頁(yè)面的無(wú)限加載場(chǎng)景下，我們需要用戶在滾動(dòng)頁(yè)面時(shí)，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求，而不是在用戶停下滾動(dòng)頁(yè)面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場(chǎng)景，就適合用節(jié)流閥技術(shù)來(lái)實(shí)現(xiàn)。

主要有兩種實(shí)現(xiàn)方法：

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

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

定時(shí)器實(shí)現(xiàn)：

當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行；直到delay秒后，定時(shí)器執(zhí)行執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。

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

當(dāng)?shù)谝淮斡|發(fā)事件時(shí)，肯定不會(huì)立即執(zhí)行函數(shù)，而是在delay秒后才執(zhí)行。
之后連續(xù)不斷觸發(fā)事件，也會(huì)每delay秒執(zhí)行一次。
當(dāng)最后一次停止觸發(fā)后，由于定時(shí)器的delay延遲，可能還會(huì)執(zhí)行一次函數(shù)。

可以綜合使用時(shí)間戳與定時(shí)器，完成一個(gè)事件觸發(fā)時(shí)立即執(zhí)行，觸發(fā)完畢還能執(zhí)行一次的節(jié)流函數(shù)：

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

需要在每個(gè)delay時(shí)間中一定會(huì)執(zhí)行一次函數(shù)，因此在節(jié)流函數(shù)內(nèi)部使用開(kāi)始時(shí)間、當(dāng)前時(shí)間與delay來(lái)計(jì)算remaining，當(dāng)remaining<=0時(shí)表示該執(zhí)行函數(shù)了，如果還沒(méi)到時(shí)間的話就設(shè)定在remaining時(shí)間后再觸發(fā)。當(dāng)然在remaining這段時(shí)間中如果又一次發(fā)生事件，那么會(huì)取消當(dāng)前的計(jì)時(shí)器，并重新計(jì)算一個(gè)remaining來(lái)判斷當(dāng)前狀態(tài)。

總結(jié)

防止一個(gè)事件頻繁觸發(fā)回調(diào)函數(shù)的方式：

防抖動(dòng)：將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置。這樣一來(lái)，只有最后一次操作能被觸發(fā)。

節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。
它和防抖動(dòng)最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)，而防抖動(dòng)只是在最后一次事件后才觸發(fā)一次函數(shù)。
原理是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)，若沒(méi)到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器。

到此這篇關(guān)于JavaScript防抖動(dòng)與節(jié)流處理的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論