前言

• 前段時間群友說面試的時候老是分不清防抖和節(jié)流。
• 其實防抖和節(jié)流不僅僅在面試中會讓大家手寫，在實際項目中也可以起到性能優(yōu)化的作用，所以還是很有必要掌握的。
• 接下來我就用一杯茶的時間帶大家徹底學(xué)會手寫防抖和節(jié)流。

防抖

個例子

我們先拋開概念不談，其實在生活中也有很多防抖的例子：

• 比如你現(xiàn)在使用的電腦，在不使用后一段時間自動休眠
• 當(dāng)你再次使用的時候重新激活，并開始你設(shè)置的時間倒計時10分鐘
• 在這10分鐘內(nèi)你繼續(xù)使用電腦又會重新開始倒計時10分鐘
• 當(dāng)你最后一次使用電腦并離開時重新倒計時10分鐘過去了，電腦就休眠了

這其實這就是防抖的基本概念了~說白了就是在一段時間只執(zhí)行一次，也就是我們上面的電腦只打開這一次。

我們上面的使用電腦可以理解為觸發(fā)事件，而與我上面標(biāo)注的setTimeout和clearTimeout其實就是防抖的主要要素了。

當(dāng)然上面的是生活中的例子，那我們在我們的日常開發(fā)中其實也經(jīng)常用到，比如我們調(diào)整頁面的大小，驗證表單某個字段是否重復(fù)時發(fā)生請求次數(shù)控制，防止表單多次提交等。

手寫防抖

說了這么多，相信大家大概理解了防抖的概念，那我們現(xiàn)在來實現(xiàn)一個防抖吧，假設(shè)我們要點擊一個按鈕新增一條信息，當(dāng)然我們不希望每次點擊都調(diào)用接口新增，我們希望多次點擊只新增一次，這時候我們該怎么寫呢？

首先我們先簡單的模擬一個按鈕被點擊的過程。

// debounce.js
let addBtn=document.getElementById('add')
function addOne(){
  console.log('增加一個')
}
addBtn.addEventListener('click',addOne)

因為我們需要對執(zhí)行的事件進行處理所以接下來我們需要封裝一下addOne函數(shù)。

// debounce.js
let addBtn=document.getElementById('add')
function addOne(){
  console.log('增加一個')
}
function debounce(fun){
  return function(){
    fun()
  }
}
addBtn.addEventListener('click',debounce(addOne))

上面我們用閉包處理了一下addOne函數(shù)，接下來我們需要添加一個延時器setTimeout來倒計時，當(dāng)我們點擊按鈕后過2s再執(zhí)行。

// debounce.js
function debounce(fun,time){
  return function(){
    setTimeout(()=>{
      fun()
    },time)
  }
}
addBtn.addEventListener('click',debounce(addOne,2000))

現(xiàn)在延時的目的是達(dá)到了但是每次點擊都會新增一個新的setTimeout而且并不能達(dá)到我們多次點擊只執(zhí)行一次的效果。

這時候就需要clearTimeout登場了，我們需要在我們點擊了按鈕后也就是debounce執(zhí)行時要先把之前的setTimeout先清除再重新計時。

function debounce(fun,time){
  let timer
  return function(){
    clearTimeout(timer)
    timer=setTimeout(()=>{
      fun()
    },time)
  }
}

現(xiàn)在我們的一個防抖功能就完成了，但是這還沒完，如果我們在addOne()打印this會發(fā)現(xiàn)我們這樣執(zhí)行的this是指向Window的。

這當(dāng)然不是我們所希望的，我們需要使用apply來改變this指向，再者就是我們需要考慮到執(zhí)行函數(shù)的參數(shù)，因為不同的函數(shù)肯定會有不同的參數(shù)傳入,對于參數(shù)我們可以使用arguments處理。

function debounce(fun,time){
  let timer
  return function(){
    clearTimeout(timer)
    let args = arguments
    timer=setTimeout(()=>{
      fun.apply(this,args)
    },time)
  }
}

這樣我們的防抖函數(shù)就手寫完成了，看起來其實也并不難。

總而言之防抖就是在不斷的操作中（輸入、點擊等）最終只執(zhí)行一次的一種提高性能的方法。

節(jié)流

舉個例子

當(dāng)然我們生活中也會有很多節(jié)流的的例子，不知道大家有沒有留意過公園的灑水機：

• 一般我們會給灑水機設(shè)定一個時間假設(shè)30min
• 當(dāng)距離上次灑水時間未夠30min的時候一直保持靜止?fàn)顟B(tài)
• 而當(dāng)?shù)搅?code>30min則會觸發(fā)灑水的事件

• 這其實也是節(jié)流的最基本的概念了，說白了就是在間隔一段時間執(zhí)行一次
• 我們上面的灑水可以理解為觸發(fā)事件，而我們上面標(biāo)注的其他信息也就只有30min和當(dāng)前時間，這兩個就是節(jié)流的主要要素了。
• 當(dāng)然上面的是我們的生活中的例子，那我們在我們的日常開發(fā)中其實也經(jīng)常用到，比如我們滾動鼠標(biāo)滾輪監(jiān)聽滾動條位置，防止按鈕多次點擊等。

手寫節(jié)流

說了這么多，相信大家大概理解了節(jié)流的概念，那我們現(xiàn)在來實現(xiàn)一個節(jié)流吧，假設(shè)我們現(xiàn)在要實現(xiàn)一個鼠標(biāo)滾動打印事件，想讓它在3s執(zhí)行一次，這時候我們該怎么寫呢？

首先我們先模擬一個觸發(fā)事件。

// throttle.js
function scrollTest(){
  console.log('現(xiàn)在我觸發(fā)了')
}
document.addEventListener('scroll',scrollTest)

接下來我們封裝一個節(jié)流函數(shù)，跟防抖一樣我們也需要利用閉包，順便再加一個參數(shù)接收節(jié)流時間。

// throttle.js
...
function throttle(fun,time){
  return function(){
    fun()
  }
}
document.addEventListener('scroll',throttle(scrollTest,3000))

因為我們的節(jié)流是在一段時間內(nèi)執(zhí)行一次也就是說如果兩次鼠標(biāo)滾動的時間間隔未到所設(shè)置的時間則不執(zhí)行。

那我們可以記錄一下每次滾動的時間戳來進行對比。

// throttle.js
...
function throttle(fun,time){
  let t1=0 //初始時間
  return function(){
    let t2=new Date() //當(dāng)前時間
    if(t2-t1>time){
      fun()
      t1=t2
    }
  }
}

我們會記錄兩個時間一個是t1代表初始時間一個是t2代表當(dāng)前時間，如果當(dāng)前時間距離上一個時間也就是初始時間大于所設(shè)置的time。

那我們就可以執(zhí)行fun()并且把初始時間變更為這一次執(zhí)行的時間，這樣每次我們執(zhí)行過后t1就變成了上一次執(zhí)行的時間。

這樣我們的一個節(jié)流功能就完成了。

// throttle.js
...
function throttle(fun,time){
  let t1=0 //初始時間
  return function(){
    let t2=new Date() //當(dāng)前時間
    if(t2-t1>time){
      fun()
      t1=t2
    }
  }
}

當(dāng)然我們也需要像防抖一樣改變this指向和接收參數(shù)，最后完成后是這樣的。

// throttle.js
...
function throttle(fun,time){
  let t1=0 //初始時間
  return function(){
    let t2=new Date() //當(dāng)前時間
    if(t2-t1>time){
      fun.apply(this,arguments)
      t1=t2
    }
  }
}

至此一個節(jié)流函數(shù)就手寫完成了，是不是也不會很難呢？

總而言之節(jié)流就是在一段時間內(nèi)不斷操作而在你規(guī)定的時間內(nèi)只執(zhí)行一次的一種提高性能的方法

寫在最后

• 首先還是很感謝大家看到這里，這次的文章就分享到這里~
• 對于防抖和節(jié)流一個最主觀的判斷方法就是：在10s內(nèi)你瘋狂點擊一個按鈕，如果使用了防抖則會只執(zhí)行一次，而你使用了節(jié)流則會每隔一段時間執(zhí)行一次，這個時間可以自己來掌控。
• 當(dāng)然防抖和節(jié)流的變形還是有很多的，根據(jù)不同的需求來變換不同的函數(shù)但是萬變不離其宗，只要你搞懂了上面的方法，其他的就沒有問題了。

以上就是一文教你徹底學(xué)會JavaScript手寫防抖節(jié)流的詳細(xì)內(nèi)容，更多關(guān)于JavaScript防抖節(jié)流的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論