☀️ 前言

在聊天室原始碼開發過程中，很多人分不清防抖和節流。其實防抖和節流可以在聊天室原始碼中起到效能優化的作用，所以還是很有必要掌握的。接下來我就用一杯茶的時間帶大家徹底學會手寫防抖和節流。

? 防抖

? 舉個例子

我們先拋開概念不談，其實在生活中也有很多防抖的例子：
比如你現在使用的電腦，在不使用後一段時間自動休眠
當你再次使用的時候重新啟用，並開始你設定的時間倒數計時10分鐘
在這10分鐘內你繼續使用電腦又會重新開始倒數計時10分鐘
當你最後一次使用電腦並離開時重新倒數計時10分鐘過去了，電腦就休眠了
這其實這就是防抖的基本概念了~說白了就是在一段時間聊天室原始碼只執行一次，也就是我們上面的電腦只開啟這一次。
我們上面的使用電腦可以理解為觸發事件，而與我上面標註的setTimeout和clearTimeout其實就是防抖的主要要素了。
當然上面的是生活中的例子，那我們在聊天室原始碼的開發中其實也經常用到，比如我們調整頁面的大小，驗證表單某個欄位是否重複時發生請求次數控制，防止表單多次提交等。

✍️ 手寫防抖

說了這麼多，相信大家大概理解了防抖的概念，那我們現在來實現一個防抖吧，假設我們要點選一個按鈕新增一條資訊，當然我們不希望每次點選都呼叫介面新增，我們希望多次點選只新增一次，這時候我們該怎麼寫呢？
首先我們先簡單的模擬聊天室原始碼中一個按鈕被點選的過程。

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

因為我們需要對執行的事件進行處理所以接下來我們需要封裝一下addOne函式。

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

上面我們用閉包處理了一下addOne函式，接下來我們需要新增一個延時器setTimeout來倒數計時，當我們點選按鈕後過2s再執行。

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

現在在聊天室原始碼中實現延時的目的是達到了但是每次點選都會新增一個新的setTimeout而且並不能達到我們多次點選只執行一次的效果。
這時候就需要clearTimeout登場了，我們需要在我們點選了按鈕後也就是debounce執行時要先把之前的setTimeout先清除再重新計時。

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

現在我們的一個防抖功能就完成了，但是這還沒完，如果我們在addOne()列印this會發現我們這樣執行的this是指向Window的。
這當然不是我們所希望的，我們需要使用apply來改變this指向，再者就是我們需要考慮到執行函式的引數，因為不同的函式肯定會有不同的引數傳入,對於引數我們可以使用arguments處理。

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

這樣我們聊天室原始碼的防抖函式就手寫完成了，看起來其實也並不難。
總而言之防抖就是在不斷的操作中（輸入、點選等）最終只執行一次的一種提高效能的方法。

? 節流

? 舉個例子

當然我們生活中也會有很多節流的的例子，不知道大家有沒有留意過公園的灑水機：
一般我們會給灑水機設定一個時間假設30min
當距離上次灑水時間未夠30min的時候一直保持靜止狀態
而當到了30min則會觸發灑水的事件
這其實也是節流的最基本的概念了，說白了就是在聊天室原始碼中間隔一段時間執行一次
我們上面的灑水可以理解為觸發事件，而我們上面標註的其他資訊也就只有30min和當前時間，這兩個就是聊天室原始碼實現節流的主要要素了。
當然上面的是我們的生活中的例子，那我們在聊天室原始碼開發中其實也經常用到，比如我們滾動滑鼠滾輪監聽滾動條位置，防止按鈕多次點選等。

✍️ 手寫節流

說了這麼多，相信大家大概理解了節流的概念，那我們現在在聊天室原始碼中實現一個節流吧，假設我們現在要實現一個滑鼠滾動列印事件，想讓它在3s執行一次，這時候我們該怎麼寫呢？
首先我們先模擬一個觸發事件。

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

接下來我們封裝一個節流函式，跟防抖一樣我們也需要利用閉包，順便再加一個引數接收節流時間。

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

因為我們的節流是在一段時間內執行一次也就是說如果兩次滑鼠滾動的時間間隔未到所設定的時間則不執行。
那我們可以記錄一下每次滾動的時間戳來進行對比。

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

我們會記錄兩個時間一個是t1代表初始時間一個是t2代表當前時間，如果當前時間距離上一個時間也就是初始時間大於所設定的time。
那我們就可以執行fun()並且把初始時間變更為這一次執行的時間，這樣每次我們執行過後t1就變成了上一次執行的時間。
這樣我們聊天室原始碼內的一個節流功能就完成了。

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

當然我們也需要像防抖一樣改變this指向和接收引數，最後完成後是這樣的。

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

至此一個節流函式就手寫完成了，是不是也不會很難呢？
總而言之節流就是在一段時間內不斷操作而在你規定的時間內只執行一次的一種提高效能的方法

? 寫在最後

首先還是很感謝大家看到這裡，這次的文章就分享到這裡~
對於聊天室原始碼中的防抖和節流一個最主觀的判斷方法就是：在10s內你瘋狂點選一個按鈕，如果使用了防抖則會只執行一次，而你使用了節流則會每隔一段時間執行一次，這個時間可以自己來掌控。
當然防抖和節流的變形還是有很多的，根據不同的需求來變換不同的函式但是萬變不離其宗，只要你搞懂了上面的方法，其他的就沒有問題了。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

聊天室原始碼開發中防抖節流的簡單實現

☀️ 前言

? 防抖

? 節流

? 寫在最後

相關文章