JavaScript 防抖和節(jié)流詳解

更新時間：2021年09月27日 16:44:54 作者：小啊菜啊

這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

防抖

自動門感應(yīng)到有人，打開門，并且開始5秒倒計時，在 5 s 內(nèi)有另外一個人靠近到門，門感應(yīng)到人，重新5秒倒計時

當(dāng)事件被觸發(fā)時，設(shè)定一個延遲，若期間事件又被觸發(fā)，則重新設(shè)定延遲，直到延遲結(jié)束，執(zhí)行動作 (防止多次觸發(fā))

web 應(yīng)用上面

改變頁面大小的統(tǒng)計
滾動頁面位置的統(tǒng)計
輸入框連續(xù)輸入的請求次數(shù)控制

一開始，點(diǎn)擊按鈕，console.log('pay money')

<body>
  <button id="btn">click</button>
</body>
<script>
  const btn = document.getElementById('btn')
  function payMoney() {
    console.log('pay money');
  }
  btn.addEventListener('click', payMoney)
</script>

定義 debounce

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
}
function debounce(func) {
  // 在函數(shù)里面返回函數(shù) , 只有當(dāng)點(diǎn)擊的時候才返回該函數(shù)
  return function () {
    func()
  }
}
btn.addEventListener('click', debounce(payMoney))

設(shè)置延時

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
}
function debounce(func, delay) {
  return function () {
    setTimeout(_ => func(), delay)
  }
}
btn.addEventListener('click', debounce(payMoney, 1000))

清除延時：未能執(zhí)行

原因

每次點(diǎn)擊的時候就會執(zhí)行返回函數(shù)里面的內(nèi)容

每次點(diǎn)擊的執(zhí)行函數(shù)都是獨(dú)立的，互不干涉

正因為他們之間沒有聯(lián)系，清除延時在這里完全沒有起作用

要讓這些獨(dú)立的執(zhí)行函數(shù)之間有聯(lián)系，需要用到作用域鏈（閉包）

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
}
function debounce(func, delay) {
  return function () {
    let timer
    clearInterval(timer)
    timer = setTimeout(_ => func(), delay)
  }
}
btn.addEventListener('click', debounce(payMoney, 1000))

將 timer 放在返回函數(shù)的外圍，這樣在定義監(jiān)聽事件的同時，就定義了 timer變量

因為作用域鏈，所有獨(dú)立的執(zhí)行函數(shù)都能訪問到這個timer變量

而且現(xiàn)在這個timer變量只創(chuàng)建了一次。是唯一的，我們只不過不斷給timer賦值進(jìn)行延時而已

每個清除延時就是清除上一個定義的延時，相當(dāng)于多個函數(shù)共用同一個外部變量

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
}
function debounce(func, delay) {
  let timer
  return function () {
    clearInterval(timer)
    timer = setTimeout(_ => func(), delay)
  }
}
btn.addEventListener('click', debounce(payMoney, 1000))

此時的代碼，this 是指向 window ?

因為回調(diào)的原因，運(yùn)行時已經(jīng)在Window下了

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
  console.log(this);
}
function debounce(func, delay) {
  let timer
  return function () {
    clearInterval(timer)
    timer = setTimeout(_ => func(), delay)
  }
}
btn.addEventListener('click', debounce(payMoney, 1000))

解決辦法

在 setTimeout 之前將 this 保存下來，此時的 this 是指向按鈕的

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
  console.log(this);
}
function debounce(func, delay) {
  let timer
  // 只有當(dāng)點(diǎn)擊的時候，才返回此函數(shù)，所以 this 是指向按鈕的
  return function () {
    let context = this
    clearInterval(timer)
    timer = setTimeout(_ => {
      func.apply(context)
    }, delay)
  }
}
btn.addEventListener('click', debounce(payMoney, 1000))

考慮參數(shù)的問題，添加 arg

const btn = document.getElementById('btn')
function payMoney() {
  console.log('pay money');
  console.log(this);
}
function debounce(func, delay) {
  let timer
  return function () {
    let context = this
    let args = arguments
    clearInterval(timer)
    timer = setTimeout(_ => {
      func.apply(context)
      console.log(context, args);
    }, delay)
  }
}
btn.addEventListener('click', debounce(payMoney, 1000))

節(jié)流

先觸發(fā)一次后，防止接下來多次觸發(fā)

滾動屏幕：統(tǒng)計用戶滾動屏幕的行為來作出相應(yīng)的網(wǎng)頁反應(yīng)

當(dāng)用戶不斷進(jìn)行滾動，就會不斷產(chǎn)生請求，相應(yīng)也會不斷增加，容易導(dǎo)致 ⛔️ 網(wǎng)絡(luò)阻塞

我們就可以在觸發(fā)事件的時候就馬上執(zhí)行任務(wù)，然后設(shè)定時間間隔限制，在這段時間內(nèi)不管用戶如何進(jìn)行滾動都忽視操作

在時間到了以后如果監(jiān)測到用戶有滾動行為，再次執(zhí)行任務(wù)。并且設(shè)置時間聞隔

首先，寫個改變頁面尺寸的同時改變頁面背景顏色的代碼

function coloring() {
  let r = Math.floor(Math.random() * 255)
  let g = Math.floor(Math.random() * 255)
  let b = Math.floor(Math.random() * 255)
  document.body.style.background = `rgb(${r}, ${g}, $)`
}
window.addEventListener('resize', coloring)

function throttle(func, delay) {
  let timer
  return function () {
    timer = setTimeout(_ => {
      func()
    }, delay)
  }
}
window.addEventListener('resize', throttle(coloring, 2000))

判斷觸發(fā)的事件是否在時間間隔內(nèi)

不在：觸發(fā)事件
在：不觸發(fā)事件

function throttle(func, delay) {
  let timer
  return function () {
    // timer 被賦值了，直接返回，即不執(zhí)行任務(wù)
    if (timer) {
      return
    }
    // 此時 timer 沒被賦值，或 timer 已經(jīng)執(zhí)行完了  
    // 為 timer 賦值進(jìn)行延時執(zhí)行
    timer = setTimeout(_ => {
      func()
      // 延遲執(zhí)行以后我們要清空timer的值
      timer = null
    }, delay)
  }
}
window.addEventListener('resize', throttle(coloring, 2000))

解決 this 指向（雖然當(dāng)前的這個例子就是在 Window 下的）

function throttle(func, delay) {
  let timer
  return function () {
    let context = this
    let args = arguments
    // timer 被賦值了，直接返回，即不執(zhí)行任務(wù)
    if (timer) {
      return
    }
    // 此時 timer 沒被賦值，或 timer 已經(jīng)執(zhí)行完了  
    // 為 timer 賦值進(jìn)行延時執(zhí)行
    timer = setTimeout(_ => {
      func.apply(context, args)
      // 延遲執(zhí)行以后我們要清空timer的值
      timer = null
    }, delay)
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

節(jié)流核心：事件間隔另一種常見的時間間隔就是用Date對象

function throttle(func, delay) {
  // 我們要和前一個時間點(diǎn)進(jìn)行比較才能確定是否已經(jīng)過了時間間隔
  // 在返回函數(shù)外圍，避免每次執(zhí)行都被自動修改
  let pre = 0
  return function () {
    // 保存執(zhí)行函數(shù)當(dāng)時的時間
    let now = new Date()
    // 剛開始，一定會執(zhí)行
    if (now - pre > delay) {
      // 已經(jīng)過了時間間隔，就可以執(zhí)行函數(shù)了
      func()
      // 執(zhí)行后，重新設(shè)置間隔點(diǎn)
      pre = now
    }
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

解決參數(shù)問題

function throttle(func, delay) {
  let pre = 0
  return function () {
    let context = this
    let args = arguments
    let now = new Date()
    if (now - pre > delay) {
      func.apply(context, args)
      pre = now
    }
  }
}
window.addEventListener('resize', throttle(coloring, 1000))