說明：

debounce和throttle在腳手架的使用，此處以防抖函式debounce為例避免按鈕被重複點選

引入：

import lodash from 'lodash'

使用：

直接使用debounce方法

 // 稽核
   audit: lodash.debounce(function() {
     this.$refs['model'].saveTotalResult(1).then(() => {
      const reportId = this.activeReport.id;
      report.audit(reportId).then(res => {
   successMsg(res.msg)
      })
     })
    },300)

補充知識：在 Vue 中使用lodash對事件進行防抖和節流

有些瀏覽器事件可以在短時間內快速觸發多次，比如調整視窗大小或向下滾動頁面。

例如，監聽頁面視窗滾動事件，並且使用者持續快速地向下滾動頁面，那麼滾動事件可能在 3 秒內觸發數千次，這可能會導致一些嚴重的效能問題。

如果在面試中討論構建應用程式，出現滾動、視窗大小調整或按下鍵等事件請務必提及 防抖(Debouncing) 和 函式節流（Throttling）來提升頁面速度和效能。這兩兄弟的本質都是以閉包的形式存在。通過對事件對應的回撥函式進行包裹、以自由變數的形式快取時間資訊，最後用 setTimeout 來控制事件的觸發頻率。

Throttle：第一個人說了算

throttle 的中心思想在於：在某段時間內，不管你觸發了多少次回撥，我都只認第一次，並在計時結束時給予響應。

先給大家講個小故事：現在有一個旅客剛下了飛機，需要用車，於是打電話叫了該機場唯一的一輛機場大巴來接。司機開到機場，心想來都來了，多接幾個人一起走吧，這樣這趟才跑得值——我等個十分鐘看看。於是司機一邊打開了計時器，一邊招呼後面的客人陸陸續續上車。在這十分鐘內，後面下飛機的乘客都只能乘這一輛大巴，十分鐘過去後，不管後面還有多少沒擠上車的乘客，這班車都必須發走。

在這個故事裡，“司機” 就是我們的節流閥，他控制發車的時機；“乘客”就是因為我們頻繁操作事件而不斷湧入的回撥任務，它需要接受“司機”的安排；而“計時器”，就是我們上文提到的以自由變數形式存在的時間資訊，它是“司機”決定發車的依據；最後“發車”這個動作，就對應到回撥函式的執行。

總結下來，所謂的“節流”，是通過在一段時間內無視後來產生的回撥請求來實現的。只要一位客人叫了車，司機就會為他開啟計時器，一定的時間內，後面需要乘車的客人都得排隊上這一輛車，誰也無法叫到更多的車。

對應到實際的互動上是一樣一樣的：每當使用者觸發了一次 scroll 事件，我們就為這個觸發操作開啟計時器。一段時間內，後續所有的 scroll 事件都會被當作“一輛車的乘客”——它們無法觸發新的 scroll 回撥。直到“一段時間”到了，第一次觸發的 scroll 事件對應的回撥才會執行，而“一段時間內”觸發的後續的 scroll 回撥都會被節流閥無視掉。

現在一起實現一個 throttle：

// fn是我們需要包裝的事件回撥,interval是時間間隔的閾值
function throttle(fn,interval) {
 // last為上一次觸發回撥的時間
 let last = 0
 
 // 將throttle處理結果當作函式返回
 return function () {
   // 保留呼叫時的this上下文
   let context = this
   // 保留呼叫時傳入的引數
   let args = arguments
   // 記錄本次觸發回撥的時間
   let now = +new Date()
 
   // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
   if (now - last >= interval) {
   // 如果時間間隔大於我們設定的時間間隔閾值，則執行回撥
     last = now;
     fn.apply(context,args);
   }
  }
}
 
// 用throttle來包裝scroll的回撥
const better_scroll = throttle(() => console.log('觸發了滾動事件'),1000)

Debounce：最後一個人說了算

防抖的中心思想在於：我會等你到底。在某段時間內，不管你觸發了多少次回撥，我都只認最後一次。

繼續講司機開車的故事。這次的司機比較有耐心。第一個乘客上車後，司機開始計時（比如說十分鐘）。十分鐘之內，如果又上來了一個乘客，司機會把計時器清零，重新開始等另一個十分鐘（延遲了等待）。直到有這麼一位乘客，從他上車開始，後續十分鐘都沒有新乘客上車，司機會認為確實沒有人需要搭這趟車了，才會把車開走。

我們對比 throttle 來理解 debounce：在throttle的邏輯裡，“第一個人說了算”，它只為第一個乘客計時，時間到了就執行回撥。而 debounce 認為，“最後一個人說了算”，debounce 會為每一個新乘客設定新的定時器。

現在一起實現一個 debounce：

// fn是我們需要包裝的事件回撥,delay是每次推遲執行的等待時間
function debounce(fn,delay) {
 // 定時器
 let timer = null
 
 // 將debounce處理結果當作函式返回
 return function () {
  // 保留呼叫時的this上下文
  let context = this
  // 保留呼叫時傳入的引數
  let args = arguments
 
  // 每次事件被觸發時，都去清除之前的舊定時器
  if(timer) {
    clearTimeout(timer)
  }
  // 設立新定時器
  timer = setTimeout(function () {
   fn.apply(context,args)
  },delay)
 }
}
 
// 用debounce來包裝scroll的回撥
const better_scroll = debounce(() => console.log('觸發了滾動事件'),1000)

用 Throttle 來優化 Debounce

debounce 的問題在於它“太有耐心了”。試想，如果使用者的操作十分頻繁——他每次都不等 debounce 設定的 delay 時間結束就進行下一次操作，於是每次 debounce 都為該使用者重新生成定時器，回撥函式被延遲了不計其數次。頻繁的延遲會導致使用者遲遲得不到響應，使用者同樣會產生“這個頁面卡死了”的觀感。

為了避免弄巧成拙，我們需要借力 throttle 的思想，打造一個“有底線”的 debounce——等你可以，但我有我的原則：delay 時間內，我可以為你重新生成定時器；但只要delay的時間到了，我必須要給使用者一個響應。這個 throttle 與 debounce “合體”思路，已經被很多成熟的前端庫應用到了它們的加強版 throttle 函式的實現中：

// fn是我們需要包裝的事件回撥,delay是時間間隔的閾值
function throttle(fn,delay) {
 // last為上一次觸發回撥的時間,timer是定時器
 let last = 0,timer = null
 // 將throttle處理結果當作函式返回
 
 return function () { 
  // 保留呼叫時的this上下文
  let context = this
  // 保留呼叫時傳入的引數
  let args = arguments
  // 記錄本次觸發回撥的時間
  let now = +new Date()
 
  // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
  if (now - last < delay) {
  // 如果時間間隔小於我們設定的時間間隔閾值，則為本次觸發操作設立一個新的定時器
    clearTimeout(timer)
    timer = setTimeout(function () {
     last = now
     fn.apply(context,args)
    },delay)
  } else {
    // 如果時間間隔超出了我們設定的時間間隔閾值，那就不等了，無論如何要反饋給使用者一次響應
    last = now
    fn.apply(context,args)
  }
 }
}
 
// 用新的throttle包裝scroll的回撥
const better_scroll = throttle(() => console.log('觸發了滾動事件'),1000) 
document.addEventListener('scroll',better_scroll)

在 Vue 裡使用 lodash 中的 Debouncing 和 Throttling

事件節流和防抖是提高效能或降低網路開銷的好方法。雖然 Vue 1曾經支援對事件的節流和防抖，但是在Vue 2中為了保持核心的簡單性，刪除對事件的節流和防抖的支援。因此，在Vue 2對對事件進行防抖和節流我們可以使用 lodash 來做。

安裝

可以通過 yarn 或 npm 安裝 lodash。

# Yarn

$ yarn add lodash

# NPM

$ npm install lodash --save

注意：如果我們不想匯入lodash的所有內容，而只匯入所需的部分，則可以通過一些Webpack構建自定義來解決問題。還可以使用lodash.throttle和lodash.debounce等軟體包分別安裝和匯入lodash的各個部分。

throttling 方法

要對事件進行節流處理方法非常簡單，只需將要呼叫的函式包裝在lodash的_.throttle函式中即可。

<template>
 <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
 
<script>
import _ from 'lodash'
 
export default {
 methods: {
  throttledMethod: _.throttle(() => {
   console.log('I get fired every two seconds!')
  },2000)
 }
}
</script>

debouncing 方法

儘管節流在某些情況下很有用，但一般情況我們經常使用的是防抖。防抖實質上將我們的事件分組在一起，並防止它們被頻繁觸發。要在Vue元件中使用節流，只需將要呼叫的函式包裝在lodash的_.debounce函式中。

<template>
 <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
 
<script>
import _ from 'lodash'
 
export default {
 methods: {
  throttledMethod: _.debounce(() => {
   console.log('I only get fired once every two seconds,max!')
  },2000)
 }
}
</script>

以上這篇在VUE中使用lodash的debounce和throttle操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。