国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

EscapedDog / 2423人閱讀

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。

前言

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

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

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


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

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

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

function jieliu (func, time){// 觸發(fā)時間間隔>time 發(fā)送請求
  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，判斷是否是最后一次請求。

去抖動 
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)
    }
  }
}

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

改進如下：

function qudou(func, time){//判斷連續(xù)time時間內(nèi)不觸發(fā)，發(fā)送func請求
  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é)

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

后記

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100905.html

相關(guān)文章

  • JavaScript 五十問——認真聊一聊去抖與節(jié)流

    摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

    chadLi 評論0 收藏0

  • Javascript 五十問——實現(xiàn)的繼承多種方式

    摘要：組合繼承實現(xiàn)了屬性分離，方法共享下的完美繼承方案繼承我們的主角，，就是對組合繼承的改進。這也是為什么在子類構(gòu)造函數(shù)中一定要顯示調(diào)用的原因。 談到繼承，或者更廣義上的：一個對象可以使用另外一個對象的屬性或方法。實現(xiàn)起來無外乎有兩種方式：apply or call 改變this的作用域原型繼承 改變__proto__指向，添加作用域鏈 而JavaScript所有的繼承實現(xiàn)，都是圍繞以上兩點...

    BlackHole1 評論0 收藏0

  • JavaScript 五十問——從源碼分析 ES6 Class 的實現(xiàn)機制

    摘要：防止類的構(gòu)造函數(shù)以普通函數(shù)的方式調(diào)用。這個函數(shù)的主要作用是通過給類添加方法，其中將靜態(tài)方法添加到構(gòu)造函數(shù)上，將非靜態(tài)的方法添加到構(gòu)造函數(shù)的原型對象上。 Class是ES6中新加入的繼承機制，實際是Javascript關(guān)于原型繼承機制的語法糖，本質(zhì)上是對原型繼承的封裝。本文將會討論：1、ES6 class的實現(xiàn)細2、相關(guān)Object API盤點3、Javascript中的繼承實現(xiàn)方案盤點...

    LeexMuller 評論0 收藏0

  • JS中的函數(shù)去抖與節(jié)流

    摘要：上段代碼的一個問題是，事件會在定時器結(jié)束后被觸發(fā)，因此會出現(xiàn)一定的延遲，如果想讓事件被立即觸發(fā)，可以使用以下的去抖函數(shù)但是，對于去抖來說，在某些場景下是不合適的，因此我們可以使用節(jié)流。 參考文章游戲星人眼中的節(jié)流與去抖（很生動） 函數(shù)去抖與節(jié)流 Debounce：函數(shù)去抖就是對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次Throttle：函數(shù)節(jié)流就是讓連續(xù)執(zhí)行的函數(shù)，變成固定時間段間斷...

    fuchenxuan 評論0 收藏0

  • JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

    摘要：前言春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于與的兩篇文章見參考文獻，很有收獲自己在開發(fā)的過程中，很多時候都會采用布局，而與這種方式已經(jīng)很少使用了這次在春假期間學習了，深感的好用與便利。相對于，它多出來一個的屬性，代表拉伸默認屬性。 前言 春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于Flex與Grid的兩篇文章（見參考文獻），很有收獲；自己在開發(fā)的過程中，很多時候都會采用Flex布局，而Float與in...

    xuhong 評論0 收藏0

發(fā)表評論

0條評論

EscapedDog

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<