說(shuō)明：

debounce和throttle在腳手架的使用，此處以防抖函數(shù)debounce為例避免按鈕被重復(fù)點(diǎn)擊

引入：

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)

補(bǔ)充知識(shí)：在 Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流

有些瀏覽器事件可以在短時(shí)間內(nèi)快速觸發(fā)多次，比如調(diào)整窗口大小或向下滾動(dòng)頁(yè)面。

例如，監(jiān)聽(tīng)頁(yè)面窗口滾動(dòng)事件，并且用戶(hù)持續(xù)快速地向下滾動(dòng)頁(yè)面，那么滾動(dòng)事件可能在 3 秒內(nèi)觸發(fā)數(shù)千次，這可能會(huì)導(dǎo)致一些嚴(yán)重的性能問(wèn)題。

如果在面試中討論構(gòu)建應(yīng)用程序，出現(xiàn)滾動(dòng)、窗口大小調(diào)整或按下鍵等事件請(qǐng)務(wù)必提及 防抖(Debouncing) 和 函數(shù)節(jié)流（Throttling）來(lái)提升頁(yè)面速度和性能。這兩兄弟的本質(zhì)都是以閉包的形式存在。通過(guò)對(duì)事件對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行包裹、以自由變量的形式緩存時(shí)間信息，最后用 setTimeout 來(lái)控制事件的觸發(fā)頻率。

Throttle：第一個(gè)人說(shuō)了算

throttle 的中心思想在于：在某段時(shí)間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)第一次，并在計(jì)時(shí)結(jié)束時(shí)給予響應(yīng)。

先給大家講個(gè)小故事：現(xiàn)在有一個(gè)旅客剛下了飛機(jī)，需要用車(chē)，于是打電話(huà)叫了該機(jī)場(chǎng)唯一的一輛機(jī)場(chǎng)大巴來(lái)接。司機(jī)開(kāi)到機(jī)場(chǎng)，心想來(lái)都來(lái)了，多接幾個(gè)人一起走吧，這樣這趟才跑得值——我等個(gè)十分鐘看看。于是司機(jī)一邊打開(kāi)了計(jì)時(shí)器，一邊招呼后面的客人陸陸續(xù)續(xù)上車(chē)。在這十分鐘內(nèi)，后面下飛機(jī)的乘客都只能乘這一輛大巴，十分鐘過(guò)去后，不管后面還有多少?zèng)]擠上車(chē)的乘客，這班車(chē)都必須發(fā)走。

在這個(gè)故事里，“司機(jī)” 就是我們的節(jié)流閥，他控制發(fā)車(chē)的時(shí)機(jī)；“乘客”就是因?yàn)槲覀冾l繁操作事件而不斷涌入的回調(diào)任務(wù)，它需要接受“司機(jī)”的安排；而“計(jì)時(shí)器”，就是我們上文提到的以自由變量形式存在的時(shí)間信息，它是“司機(jī)”決定發(fā)車(chē)的依據(jù)；最后“發(fā)車(chē)”這個(gè)動(dòng)作，就對(duì)應(yīng)到回調(diào)函數(shù)的執(zhí)行。

總結(jié)下來(lái)，所謂的“節(jié)流”，是通過(guò)在一段時(shí)間內(nèi)無(wú)視后來(lái)產(chǎn)生的回調(diào)請(qǐng)求來(lái)實(shí)現(xiàn)的。只要一位客人叫了車(chē)，司機(jī)就會(huì)為他開(kāi)啟計(jì)時(shí)器，一定的時(shí)間內(nèi)，后面需要乘車(chē)的客人都得排隊(duì)上這一輛車(chē)，誰(shuí)也無(wú)法叫到更多的車(chē)。

對(duì)應(yīng)到實(shí)際的交互上是一樣一樣的：每當(dāng)用戶(hù)觸發(fā)了一次 scroll 事件，我們就為這個(gè)觸發(fā)操作開(kāi)啟計(jì)時(shí)器。一段時(shí)間內(nèi)，后續(xù)所有的 scroll 事件都會(huì)被當(dāng)作“一輛車(chē)的乘客”——它們無(wú)法觸發(fā)新的 scroll 回調(diào)。直到“一段時(shí)間”到了，第一次觸發(fā)的 scroll 事件對(duì)應(yīng)的回調(diào)才會(huì)執(zhí)行，而“一段時(shí)間內(nèi)”觸發(fā)的后續(xù)的 scroll 回調(diào)都會(huì)被節(jié)流閥無(wú)視掉。

現(xiàn)在一起實(shí)現(xiàn)一個(gè) throttle：

// fn是我們需要包裝的事件回調(diào), interval是時(shí)間間隔的閾值function throttle(fn, interval) { // last為上一次觸發(fā)回調(diào)的時(shí)間 let last = 0 // 將throttle處理結(jié)果當(dāng)作函數(shù)返回 return function () { // 保留調(diào)用時(shí)的this上下文 let context = this // 保留調(diào)用時(shí)傳入的參數(shù) let args = arguments // 記錄本次觸發(fā)回調(diào)的時(shí)間 let now = +new Date() // 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔的閾值 if (now - last >= interval) { // 如果時(shí)間間隔大于我們?cè)O(shè)定的時(shí)間間隔閾值，則執(zhí)行回調(diào) last = now; fn.apply(context, args); } }} // 用throttle來(lái)包裝scroll的回調(diào)const better_scroll = throttle(() => console.log(’觸發(fā)了滾動(dòng)事件’), 1000)

Debounce：最后一個(gè)人說(shuō)了算

防抖的中心思想在于：我會(huì)等你到底。在某段時(shí)間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)最后一次。

繼續(xù)講司機(jī)開(kāi)車(chē)的故事。這次的司機(jī)比較有耐心。第一個(gè)乘客上車(chē)后，司機(jī)開(kāi)始計(jì)時(shí)（比如說(shuō)十分鐘）。十分鐘之內(nèi)，如果又上來(lái)了一個(gè)乘客，司機(jī)會(huì)把計(jì)時(shí)器清零，重新開(kāi)始等另一個(gè)十分鐘（延遲了等待）。直到有這么一位乘客，從他上車(chē)開(kāi)始，后續(xù)十分鐘都沒(méi)有新乘客上車(chē)，司機(jī)會(huì)認(rèn)為確實(shí)沒(méi)有人需要搭這趟車(chē)了，才會(huì)把車(chē)開(kāi)走。

我們對(duì)比 throttle 來(lái)理解 debounce：在throttle的邏輯里，“第一個(gè)人說(shuō)了算”，它只為第一個(gè)乘客計(jì)時(shí)，時(shí)間到了就執(zhí)行回調(diào)。而 debounce 認(rèn)為，“最后一個(gè)人說(shuō)了算”，debounce 會(huì)為每一個(gè)新乘客設(shè)定新的定時(shí)器。

現(xiàn)在一起實(shí)現(xiàn)一個(gè) debounce：

// fn是我們需要包裝的事件回調(diào), delay是每次推遲執(zhí)行的等待時(shí)間function debounce(fn, delay) { // 定時(shí)器 let timer = null // 將debounce處理結(jié)果當(dāng)作函數(shù)返回 return function () { // 保留調(diào)用時(shí)的this上下文 let context = this // 保留調(diào)用時(shí)傳入的參數(shù) let args = arguments // 每次事件被觸發(fā)時(shí)，都去清除之前的舊定時(shí)器 if(timer) { clearTimeout(timer) } // 設(shè)立新定時(shí)器 timer = setTimeout(function () { fn.apply(context, args) }, delay) }} // 用debounce來(lái)包裝scroll的回調(diào)const better_scroll = debounce(() => console.log(’觸發(fā)了滾動(dòng)事件’), 1000)

用 Throttle 來(lái)優(yōu)化 Debounce

debounce 的問(wèn)題在于它“太有耐心了”。試想，如果用戶(hù)的操作十分頻繁——他每次都不等 debounce 設(shè)置的 delay 時(shí)間結(jié)束就進(jìn)行下一次操作，于是每次 debounce 都為該用戶(hù)重新生成定時(shí)器，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。頻繁的延遲會(huì)導(dǎo)致用戶(hù)遲遲得不到響應(yīng)，用戶(hù)同樣會(huì)產(chǎn)生“這個(gè)頁(yè)面卡死了”的觀感。

為了避免弄巧成拙，我們需要借力 throttle 的思想，打造一個(gè)“有底線(xiàn)”的 debounce——等你可以，但我有我的原則：delay 時(shí)間內(nèi)，我可以為你重新生成定時(shí)器；但只要delay的時(shí)間到了，我必須要給用戶(hù)一個(gè)響應(yīng)。這個(gè) throttle 與 debounce “合體”思路，已經(jīng)被很多成熟的前端庫(kù)應(yīng)用到了它們的加強(qiáng)版 throttle 函數(shù)的實(shí)現(xiàn)中：

// fn是我們需要包裝的事件回調(diào), delay是時(shí)間間隔的閾值function throttle(fn, delay) { // last為上一次觸發(fā)回調(diào)的時(shí)間, timer是定時(shí)器 let last = 0, timer = null // 將throttle處理結(jié)果當(dāng)作函數(shù)返回 return function () { // 保留調(diào)用時(shí)的this上下文 let context = this // 保留調(diào)用時(shí)傳入的參數(shù) let args = arguments // 記錄本次觸發(fā)回調(diào)的時(shí)間 let now = +new Date() // 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔的閾值 if (now - last < delay) { // 如果時(shí)間間隔小于我們?cè)O(shè)定的時(shí)間間隔閾值，則為本次觸發(fā)操作設(shè)立一個(gè)新的定時(shí)器 clearTimeout(timer) timer = setTimeout(function () { last = now fn.apply(context, args) }, delay) } else { // 如果時(shí)間間隔超出了我們?cè)O(shè)定的時(shí)間間隔閾值，那就不等了，無(wú)論如何要反饋給用戶(hù)一次響應(yīng) last = now fn.apply(context, args) } }} // 用新的throttle包裝scroll的回調(diào)const better_scroll = throttle(() => console.log(’觸發(fā)了滾動(dòng)事件’), 1000) document.addEventListener(’scroll’, better_scroll)

在 Vue 里使用 lodash 中的 Debouncing 和 Throttling

事件節(jié)流和防抖是提高性能或降低網(wǎng)絡(luò)開(kāi)銷(xiāo)的好方法。雖然 Vue 1曾經(jīng)支持對(duì)事件的節(jié)流和防抖，但是在Vue 2中為了保持核心的簡(jiǎn)單性，刪除對(duì)事件的節(jié)流和防抖的支持。因此，在Vue 2對(duì)對(duì)事件進(jìn)行防抖和節(jié)流我們可以使用 lodash 來(lái)做。

安裝

可以通過(guò) yarn 或 npm 安裝 lodash。

# Yarn

$ yarn add lodash

# NPM

$ npm install lodash --save

注意：如果我們不想導(dǎo)入lodash的所有內(nèi)容，而只導(dǎo)入所需的部分，則可以通過(guò)一些Webpack構(gòu)建自定義來(lái)解決問(wèn)題。還可以使用lodash.throttle和lodash.debounce等軟件包分別安裝和導(dǎo)入lodash的各個(gè)部分。

throttling 方法

要對(duì)事件進(jìn)行節(jié)流處理方法非常簡(jiǎn)單，只需將要調(diào)用的函數(shù)包裝在lodash的_.throttle函數(shù)中即可。

<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 方法

盡管節(jié)流在某些情況下很有用，但一般情況我們經(jīng)常使用的是防抖。防抖實(shí)質(zhì)上將我們的事件分組在一起，并防止它們被頻繁觸發(fā)。要在Vue組件中使用節(jié)流，只需將要調(diào)用的函數(shù)包裝在lodash的_.debounce函數(shù)中。

<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操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。