前言

防抖和節(jié)流函數(shù)是我們在平常開發(fā)的時候，比較常用的兩個工具函數(shù)，使用防抖和節(jié)流函數(shù)可以提高我們的效率，減小事件觸發(fā)的頻率，可以起到降低服務(wù)器壓力的作用。并且在面試時候，這兩個函數(shù)也是會經(jīng)常會被問到，因此，了解防抖和節(jié)流函數(shù)的基本原理和應(yīng)用場景，并且手寫實現(xiàn)這兩個函數(shù)至關(guān)重要

防抖函數(shù)

概念和應(yīng)用場景

防抖函數(shù)：當(dāng)事件觸發(fā)的時候，并不會立刻執(zhí)行，而是會等待一段事件，當(dāng)事件密集觸發(fā)時候，函數(shù)的觸發(fā)會頻繁的被推遲，只有等待了一段時間也沒有事件觸發(fā)，才會真正的執(zhí)行。如下圖所示：

防抖的應(yīng)用場景很多：

• 輸入框中頻繁的輸入內(nèi)容，搜索或者提交信息；
• 頻繁的點擊按鈕，觸發(fā)某個事件；
• 監(jiān)聽瀏覽器滾動事件，完成某些特定操作；
• 用戶縮放瀏覽器的resize事件

案例：

在某個搜索框中輸入自己想要搜索的內(nèi)容：

比如想要搜索一個MacBook：
當(dāng)我輸入m時，為了更好的用戶體驗，通常會出現(xiàn)對應(yīng)的聯(lián)想內(nèi)容，這些聯(lián)想內(nèi)容通常是保存在服務(wù)器的，所以需要一次網(wǎng)絡(luò)請求；當(dāng)繼續(xù)輸入ma時，再次發(fā)送網(wǎng)絡(luò)請求；
那么macbook一共需要發(fā)送7次網(wǎng)絡(luò)請求； 這大大損耗我們整個系統(tǒng)的性能，無論是前端的事件處理，還是對于服務(wù)器的壓力;

但是我們需要這么多次的網(wǎng)絡(luò)請求嗎？

不需要，正確的做法應(yīng)該是在合適的情況下再發(fā)送網(wǎng)絡(luò)請求； 比如如果用戶快速的輸入一個macbook，那么只是發(fā)送一次網(wǎng)絡(luò)請求；
比如如果用戶是輸入一個m想了一會兒，這個時候m確實應(yīng)該發(fā)送一次網(wǎng)絡(luò)請求；
也就是我們應(yīng)該監(jiān)聽用戶在某個時間，比如500ms內(nèi)，沒有再次觸發(fā)時間時，再發(fā)送網(wǎng)絡(luò)請求；
這就是防抖的操作：只有在某個時間內(nèi)，沒有再次觸發(fā)某個函數(shù)時，才真正的調(diào)用這個函數(shù)；

手寫實現(xiàn)防抖函數(shù)

那么如何通過代碼實現(xiàn)防抖的功能呢？

首先，防抖函數(shù)應(yīng)該傳入一個需要實現(xiàn)防抖的函數(shù)，還有一個時間，該時間表示在規(guī)定時間內(nèi)，如果再次觸發(fā)此次事件，則取消上次事件。返回的結(jié)果應(yīng)該是一個執(zhí)行了此功能的函數(shù)。

那么整體的框架如下，只需要在_debounce函數(shù)里面實現(xiàn)功能即可。

function debounce(fn,delay){
	const _debounce = function(){
	}
	return _debounce
}

函數(shù)的參數(shù)傳進來一個時間，該時間表示在規(guī)定時間內(nèi)，如果再次觸發(fā)此次事件，則取消上次事件，所以需要有定時器來記錄時間。并且有取消事件的過程，所以我們需要在滿足條件時候，取消定時器，即clearTimeout,那么還有個問題，fn函數(shù)this指向。

如果在_debounce中單獨調(diào)用傳進來的函數(shù)fn,即以fn()形式直接調(diào)用，那么fn是屬于獨立的函數(shù)調(diào)用，this指向的是window，實際this指向的是調(diào)用函數(shù)的對象，所以會出現(xiàn)錯誤。

我們知道事件調(diào)用的時候，響應(yīng)函數(shù)參數(shù)會傳進來一個event事件對象，所以我們要對這個參數(shù)（event事件對象）做處理。

那么：

timer定義一個定時器，保存上一次的定時器，在_debounce函數(shù)里面，如果timer不為空，那么先清除上一次的定時器，之后再給timer賦值，讓他延遲執(zhí)行fn函數(shù)，fn函數(shù)用apply改變了this指向，在setTimeout內(nèi)部使用的是箭頭函數(shù)，由于箭頭函數(shù)內(nèi)部沒有this，所以會去上層找this，那么這個this實際上就是調(diào)用debounce的對象。

比如輸入框的輸入事件做防抖處理：

const inputEl = document.querySelector(“input”)
inputChange是輸入事件觸發(fā)后所要執(zhí)行的函數(shù)，可以給他做防抖處理：const debounceChange = debounce(inputChange,3000)，然后執(zhí)行： inputEl.oninput = debounceChange,如果不加防抖處理，毫無疑問，每次在輸入框輸入時候，都會觸發(fā)事件，加了防抖處理后，3秒內(nèi)多次調(diào)用，下一次事件會把上一次事件清除掉。

這里的this通過apply調(diào)用后，指向的就是inputEl這個元素，

function debounce(fn, delay) {
  // 1.定義一個定時器, 保存上一次的定時器
  let timer = null

  // 2.真正執(zhí)行的函數(shù)
  const _debounce = function(...args) {
    // 取消上一次的定時器
    if (timer) clearTimeout(timer)
    // 延遲執(zhí)行
    timer = setTimeout(() => {
      // 外部傳入的真正要執(zhí)行的函數(shù)
      fn.apply(this, args)
    }, delay)
  }

  return _debounce
}

節(jié)流函數(shù)

概念和應(yīng)用場景

節(jié)流函數(shù)：當(dāng)事件執(zhí)行時候，會執(zhí)行這個事件的響應(yīng)函數(shù)；如果這個事件會被頻繁觸發(fā)，那么節(jié)流函數(shù)會按照一定的頻率來執(zhí)行函數(shù)；不管在這個中間有多少次觸發(fā)這個事件，執(zhí)行函數(shù)的頻繁總是固定的；如圖所示：

節(jié)流的應(yīng)用場景：

• 監(jiān)聽頁面的滾動事件；
• 鼠標(biāo)移動事件；
• 用戶頻繁點擊按鈕操作；
• 游戲中的一些設(shè)計

節(jié)流的具體應(yīng)用場景：
很多人都玩過類似于飛機大戰(zhàn)的游戲

在飛機大戰(zhàn)的游戲中，我們按下空格會發(fā)射一個子彈：

很多飛機大戰(zhàn)的游戲中會有這樣的設(shè)定，即使按下的頻率非?？?，子彈也會保持一定的頻率來發(fā)射；

比如1秒鐘只能發(fā)射一次，即使用戶在這1秒鐘按下了10次，子彈會保持發(fā)射一顆的頻率來發(fā)射；

但是事件是觸發(fā)了10次的，響應(yīng)的函數(shù)只觸發(fā)了一次

手寫實現(xiàn)節(jié)流函數(shù)

那么如何通過代碼實現(xiàn)防抖的功能呢？

首先，我們需要兩個變量記錄當(dāng)前事件觸發(fā)的時間和上一次的開始時間，函數(shù)的參數(shù)會傳進來間隔的時間，由此我們可以計算出下次觸發(fā)的最低間隔時間，即為間隔時間-（當(dāng)前事件觸發(fā)的時間-上次的開始時間），如果間隔時間<=0，那么執(zhí)行fn函數(shù)，并且修改上一次的開始時間為當(dāng)前事件觸發(fā)時間。

function throttle(fn, interval) {
  // 1.記錄上一次的開始時間
  let lastTime = 0

  // 2.事件觸發(fā)時, 真正執(zhí)行的函數(shù)
  const _throttle = function(...args) {

    // 2.1.獲取當(dāng)前事件觸發(fā)時的時間
    const nowTime = new Date().getTime()

    // 2.2.使用當(dāng)前觸發(fā)的時間和之前的時間間隔以及上一次開始的時間, 計算出還剩余多長事件需要去觸發(fā)函數(shù)
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 2.3.真正觸發(fā)函數(shù)
      fn.apply(this,args)
      // 2.4.保留上次觸發(fā)的時間
      lastTime = nowTime
    }
  }

  return _throttle
}

到此這篇關(guān)于js防抖-節(jié)流函數(shù)的基本實現(xiàn)和補充詳解的文章就介紹到這了,更多相關(guān)js防抖節(jié)流函數(shù)的實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論