JavaScript 五十問(wèn)——認(rèn)真聊一聊去抖與節(jié)流

EscapedDog 發(fā)布于2019-08-23 14:38 / 2414人閱讀

摘要：前言無(wú)論是面試還是在討論瀏覽器優(yōu)化過(guò)程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問(wèn)題。總的來(lái)說(shuō)，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔。

前言

無(wú)論是面試還是在討論瀏覽器優(yōu)化過(guò)程中，都會(huì)涉及到去抖動(dòng)和節(jié)流的問(wèn)題。
總的來(lái)說(shuō)，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會(huì)指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會(huì)指定事件不觸發(fā)的時(shí)間間隔。從結(jié)果上來(lái)看，節(jié)流降低了時(shí)間處理的敏感度；而去抖對(duì)從觸發(fā)事件先存儲(chǔ)起來(lái)，等到超過(guò)指定事件間隔后，一起發(fā)送。
越來(lái)越暈，直接上代碼:
HTML

這里有一個(gè)供用戶搜索使用的input標(biāo)簽，有一個(gè)input事件會(huì)觸發(fā)的處理函數(shù)fatch，這個(gè)fatch會(huì)根據(jù)input的value值向后臺(tái)去請(qǐng)求聯(lián)想詞。
上面代碼思路是沒(méi)有問(wèn)題的，但是如果不做觸發(fā)限制的話，可能會(huì)產(chǎn)生大量的http請(qǐng)求，而這些請(qǐng)求里面很多可能意義不大，為我們的優(yōu)化提供了空間；下面，我就采用節(jié)流和去抖兩種思路來(lái)解決這個(gè)問(wèn)題。（一般針對(duì)input這種情況，使用去抖解決；這里只是方便做代碼說(shuō)明）

節(jié)流

function jieliu (func, time){//func 執(zhí)行函數(shù)， time 時(shí)間間隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//監(jiān)聽(tīng)函數(shù)，指定間隔時(shí)間
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//調(diào)用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

以上是比較簡(jiǎn)單的節(jié)流實(shí)現(xiàn)以及基本的調(diào)用方式；使用閉包是為了保存每一次執(zhí)行的lastRun。基本實(shí)現(xiàn)了限制請(qǐng)求頻率的需求，但忽略了最后一個(gè)的觸發(fā)。
改進(jìn)如下：

function jieliu (func, time){// 觸發(fā)時(shí)間間隔>time 發(fā)送請(qǐng)求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

加入timeout，判斷是否是最后一次請(qǐng)求。

去抖動(dòng)

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

以上簡(jiǎn)單實(shí)現(xiàn)去抖動(dòng)，同樣，最后一次事件不能夠觸發(fā)處理函數(shù)。

改進(jìn)如下：

function qudou(func, time){//判斷連續(xù)time時(shí)間內(nèi)不觸發(fā)，發(fā)送func請(qǐng)求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

總結(jié)

通篇寫(xiě)下來(lái)，節(jié)流主要的實(shí)現(xiàn)方式還是通過(guò)對(duì)比“now”與“l(fā)astRun”的時(shí)間差，進(jìn)而減少處理函數(shù)的調(diào)用次數(shù)；而防抖還是通過(guò)settimeout來(lái)延緩處理函數(shù)的調(diào)用時(shí)機(jī)，進(jìn)而把多次觸發(fā)的結(jié)果匯總一起調(diào)用處理函數(shù)。

后記

節(jié)流與去抖動(dòng)兩種方案還是有很大不同的，很多人包括我都很容易搞混。如果大家有更好的解決方案或者需要討論的地方，歡迎在踴躍留言！