JS簡(jiǎn)單實(shí)現(xiàn)防抖和節(jié)流

MRZYD 發(fā)布于2019-08-23 10:37 / 1404人閱讀

摘要：定時(shí)器實(shí)現(xiàn)當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行直到秒后，定時(shí)器執(zhí)行執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。當(dāng)最后一次停止觸發(fā)后，由于定時(shí)器的延遲，可能還會(huì)執(zhí)行一次函數(shù)。

一、什么是防抖和節(jié)流

Ps: 比如搜索框，用戶在輸入的時(shí)候使用change事件去調(diào)用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務(wù)器資源，即使你的服務(wù)器資源很強(qiáng)大，也不帶這么玩的。

1. 防抖 - debounce

其中一種解決方案就是每次用戶停止輸入后，延遲超過(guò)500ms時(shí)，才去搜索此時(shí)的String，這就是防抖。

原理：將若干個(gè)函數(shù)調(diào)用合成為一次，并在給定時(shí)間過(guò)去之后僅被調(diào)用一次。

代碼實(shí)現(xiàn)：

function debounce(fn, delay) {
  // 維護(hù)一個(gè) timer，用來(lái)記錄當(dāng)前執(zhí)行函數(shù)狀態(tài)
  let timer = null;

  return function() {
    // 通過(guò) ‘this’ 和 ‘a(chǎn)rguments’ 獲取函數(shù)的作用域和變量
    let context = this;
    let args = arguments;
    // 清理掉正在執(zhí)行的函數(shù)，并重新執(zhí)行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 記錄當(dāng)前函數(shù)調(diào)用次數(shù)
// 當(dāng)用戶滾動(dòng)時(shí)被調(diào)用的函數(shù)
function foo() {
  flag++;
  console.log("Number of calls: %d", flag);
}

// 在 debounce 中包裝我們的函數(shù)，過(guò) 2 秒觸發(fā)一次
document.body.addEventListener("scroll", debounce(foo, 2000));


debounce函數(shù)封裝后，返回內(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í)行

2. 節(jié)流 - throttle

另一種解決方案比防抖要寬松些，這時(shí)我們不想用戶一味的輸入，而是給用戶一些搜索提示，所以在當(dāng)中限制每過(guò)500ms就查詢一次此時(shí)的String，這就是節(jié)流。

原理：節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

代碼實(shí)現(xiàn)有兩種，一種是時(shí)間戳，另一種是定時(shí)器
1）時(shí)間戳實(shí)現(xiàn)：

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const 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í)行了。

2）定時(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í)器。

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let 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ù)。

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

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const 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)。