本篇內(nèi)容從節(jié)流和去抖的概念基礎(chǔ)知識講起，對JS函數(shù)做了詳細(xì)的分析，一起來看下：

1、什么是節(jié)流和去抖？

節(jié)流。就是擰緊水龍頭讓水少流一點，但是不是不讓水流了。想象一下在現(xiàn)實生活中有時候我們需要接一桶水，接水的同時不想一直站在那等著，可能要離開一會去干一點別的事請，讓水差不多流滿一桶水的時候再回來，這個時候，不能把水龍頭開的太大，不然還沒回來水就已經(jīng)滿了，浪費了好多水，這時候就需要節(jié)流，讓自己回來的時候水差不多滿了。那在JS里有沒有這種情況呢，典型的場景是圖片懶加載監(jiān)聽頁面的scoll事件，或者監(jiān)聽鼠標(biāo)的mousemove事件，這些事件對應(yīng)的處理方法相當(dāng)于水，由于scroll和mousemove在鼠標(biāo)移動的時候會被瀏覽器頻繁的觸發(fā)，會導(dǎo)致對應(yīng)的事件也會被頻繁的觸發(fā)（水流的太快了），這樣就會造成很大的瀏覽器資源開銷，而且好多中間的處理是不必要的，這樣就會造成瀏覽器卡頓的現(xiàn)象，這時候就需要節(jié)流，如何節(jié)流呢？我們無法做到讓瀏覽器不去觸發(fā)對應(yīng)的事件，但是可以做到讓處理事件的方法執(zhí)行頻率減少，從而減少對應(yīng)的處理開銷。

去抖。最早接觸這個詞應(yīng)該是在高中物理里面學(xué)到的，有時候開關(guān)在在真正閉合之前可能會發(fā)生一些抖動現(xiàn)象，如果抖動的明顯的話，對應(yīng)的小燈泡可能會閃爍，把燈泡閃壞了不重要，萬一把眼睛再給閃壞了可就麻煩了，這個時候就有去抖電路的出現(xiàn)。而在我們的頁面里，也有這種情況，假設(shè)我們的一個輸入框，輸入內(nèi)容的同時可能會去后臺查詢對應(yīng)的聯(lián)想 詞，如果用戶輸入的同時，頻繁的觸發(fā)input事件，然后頻繁的向后抬發(fā)送請，那么直到用戶輸入完成時，之前的請求都應(yīng)該是多余的，假設(shè)網(wǎng)絡(luò)慢一點，后臺返回的數(shù)據(jù)比較慢，那么顯示的聯(lián)想詞可能會出現(xiàn)頻繁的變換，直到最后的一個請求返回。這個時候就可以在一定時間內(nèi)監(jiān)聽是否再次輸入，如果沒有再次輸入則認(rèn)為本次輸入完成，發(fā)送請求，否則就是判定用戶仍在輸入，不發(fā)送請求。

去抖和節(jié)流是不同的，因為節(jié)流雖然中間的處理函數(shù)被限制了，但是只是減少了頻率，而去抖則把中間的處理函數(shù)全部過濾掉了，只執(zhí)行規(guī)判定時間內(nèi)的最后一個事件。

2、JS實現(xiàn)。

前面BB了這么多，感謝你耐心的看到這里，接下來我們來自己動手看看如何實現(xiàn)節(jié)流和去抖。

節(jié)流：

/** 實現(xiàn)思路：
  ** 參數(shù)需要一個執(zhí)行的頻率，和一個對應(yīng)的處理函數(shù),
  ** 內(nèi)部需要一個lastTime 變量記錄上一次執(zhí)行的時間
  **/
  function throttle (func, wait) {
   let lastTime = null　　　　// 為了避免每次調(diào)用lastTime都被清空，利用js的閉包返回一個function確保不生命全局變量也可以
   return function () {
    let now = new Date()
    // 如果上次執(zhí)行的時間和這次觸發(fā)的時間大于一個執(zhí)行周期，則執(zhí)行
    if (now - lastTime - wait > 0) {
     func()
     lastTime = now
    }
   }
  }

再看如何調(diào)用：

// 由于閉包的存在，調(diào)用會不一樣
let throttleRun = throttle(() => {
  console.log(123)
}, 400)
window.addEventListener('scroll', throttleRun)

這時候f瘋狂的滾動頁面，會發(fā)現(xiàn)會400ms打印一個123，而沒有節(jié)流的話會不斷地打印， 你可以改變wait參數(shù)去感受下不同。

但是到這里，我們的節(jié)流方法是不完善的，因為我們的方法沒有獲取事件發(fā)生時的this對象，而且由于我們的方法簡單粗暴的通過判斷這次觸發(fā)的時間和上次執(zhí)行時間的間隔來決定是否執(zhí)行回調(diào)，這樣就會造成最后一次觸發(fā)無法執(zhí)行，或者用戶出發(fā)的間隔確實很短，也無法執(zhí)行，造成了誤殺，所以需要對方法進(jìn)行完善。

function throttle (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 如果上次執(zhí)行的時間和這次觸發(fā)的時間大于一個執(zhí)行周期，則執(zhí)行
    if (now - lastTime - wait > 0) {
     // 如果之前有了定時任務(wù)則清除
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     func.apply(context, arguments)
     lastTime = now
    } else if (!timeout) {
     timeout = setTimeout(() => {
      // 改變執(zhí)行上下文環(huán)境
      func.apply(context, arguments)
     }, wait)
    }
   }
  }

這樣我們的方法就相對完善了，調(diào)用方法和之前相同。

去抖：

去抖的方法，和節(jié)流思路一致，但是只有在抖動被判定結(jié)束后，方法才會得到執(zhí)行。

debounce (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 判定不是一次抖動
    if (now - lastTime - wait > 0) {
     setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    } else {
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     timeout = setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    }
    // 注意這里lastTime是上次的觸發(fā)時間
    lastTime = now
   }
  }

這時候按照之前同樣的方式調(diào)用，會發(fā)現(xiàn)無論怎么瘋狂的滾動窗口，只有停止?jié)L動時，才會執(zhí)行對應(yīng)的事件。

去抖和節(jié)流已經(jīng)有很多成熟的js進(jìn)行了實現(xiàn)，其大致思路基本是這樣的。

我們再給大家分享一下網(wǎng)友的實現(xiàn)方法的代碼：

方法一

1.這種實現(xiàn)方式的思路很好理解：設(shè)置一個一間隔時間，比如50毫秒，以此時間為基準(zhǔn)設(shè)置定時器，當(dāng)?shù)谝淮斡|發(fā)事件到第二次觸發(fā)事件間隔小于50毫秒時，清除這個定時器，并設(shè)置一個新的定時器，以此類推，直到有一次事件觸發(fā)后50毫秒內(nèi)沒有重復(fù)觸發(fā)。代碼如下：

function debounce(method){ 
 clearTimeout(method.timer); 
 method.timer=setTimeout(function(){ 
  method(); 
 },50); 
} 

這種設(shè)計方式有一個問題：本來應(yīng)該多次觸發(fā)的事件，可能最終只會發(fā)生一次。具體來說，一個循序漸進(jìn)的滾動事件，如果用戶滾動太快速，或者程序設(shè)置的函數(shù)節(jié)流間隔時間太長，那么最終滾動事件會呈現(xiàn)為一個很突然的跳躍事件，中間過程都被節(jié)流截掉了。這個例子舉的有點夸張了，不過使用這種方式進(jìn)行節(jié)流最終是會明顯感受到程序比不節(jié)流的時候“更突兀”，這對于用戶體驗是很差的。有一種彌補這種缺陷的設(shè)計思路。

方法二

2.第二種實現(xiàn)方式的思路與第一種稍有差別：設(shè)置一個間隔時間，比如50毫秒，以此時間為基準(zhǔn)穩(wěn)定分隔事件觸發(fā)情況，也就是說100毫秒內(nèi)連續(xù)觸發(fā)多次事件，也只會按照50毫秒一次穩(wěn)定分隔執(zhí)行。代碼如下：

var oldTime=new Date().getTime(); 
var delay=50; 
function throttle1(method){ 
 var curTime=new Date().getTime(); 
 if(curTime-oldTime>=delay){ 
  oldTime=curTime; 
  method(); 
 } 
} 

相比于第一種方法，第二種方法也許會比第一種方法執(zhí)行更多次（有時候意味著更多次請求后臺，即更多的流量），但是卻很好的解決了第一種方法清除中間過程的缺陷。因此在具體場景應(yīng)根據(jù)情況擇優(yōu)決定使用哪種方法。

對于方法二，我們再提供另一種同樣功能的寫法：

var timer=undefined,delay=50; 
function throttle2(method){ 
 if(timer){ 
  return ; 
 } 
 method(); 
 timer=setTimeout(function(){ 
  timer=undefined; 
 },delay); 
}

最新評論