有些瀏覽器事件可以在短時(shí)間內(nèi)快速觸發(fā)多次弄企，比如調(diào)整窗口大小或向下滾動(dòng)頁面戏挡。例如货徙，監(jiān)聽頁面窗口滾動(dòng)事件左权，并且用戶持續(xù)快速地向下滾動(dòng)頁面，那么滾動(dòng)事件可能在 3 秒內(nèi)觸發(fā)數(shù)千次痴颊，這可能會(huì)導(dǎo)致一些嚴(yán)重的性能問題赏迟。
如果在面試中討論構(gòu)建應(yīng)用程序，出現(xiàn)滾動(dòng)蠢棱、窗口大小調(diào)整或按下鍵等事件請(qǐng)務(wù)必提及 防抖(Debouncing) 和 函數(shù)節(jié)流（Throttling）來提升頁面速度和性能锌杀。這兩兄弟的本質(zhì)都是以閉包的形式存在。通過對(duì)事件對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行包裹泻仙、以自由變量的形式緩存時(shí)間信息糕再，最后用 setTimeout 來控制事件的觸發(fā)頻率。
Throttle：第一個(gè)人說了算
throttle 的中心思想在于：在某段時(shí)間內(nèi)玉转，不管你觸發(fā)了多少次回調(diào)吟宦，我都只認(rèn)第一次牍疏，并在計(jì)時(shí)結(jié)束時(shí)給予響應(yīng)戏仓。
先給大家講個(gè)小故事：現(xiàn)在有一個(gè)旅客剛下了飛機(jī)崖蜜，需要用車，于是打電話叫了該機(jī)場(chǎng)唯一的一輛機(jī)場(chǎng)大巴來接祟峦。司機(jī)開到機(jī)場(chǎng)，心想來都來了，多接幾個(gè)人一起走吧妓蛮，這樣這趟才跑得值——我等個(gè)十分鐘看看。于是司機(jī)一邊打開了計(jì)時(shí)器圾叼，一邊招呼后面的客人陸陸續(xù)續(xù)上車蛤克。在這十分鐘內(nèi)，后面下飛機(jī)的乘客都只能乘這一輛大巴夷蚊，十分鐘過去后构挤，不管后面還有多少?zèng)]擠上車的乘客，這班車都必須發(fā)走惕鼓。
在這個(gè)故事里筋现，“司機(jī)” 就是我們的節(jié)流閥，他控制發(fā)車的時(shí)機(jī)箱歧；“乘客”就是因?yàn)槲覀冾l繁操作事件而不斷涌入的回調(diào)任務(wù)矾飞，它需要接受“司機(jī)”的安排；而“計(jì)時(shí)器”呀邢，就是我們上文提到的以自由變量形式存在的時(shí)間信息洒沦，它是“司機(jī)”決定發(fā)車的依據(jù)；最后“發(fā)車”這個(gè)動(dòng)作价淌，就對(duì)應(yīng)到回調(diào)函數(shù)的執(zhí)行申眼。
總結(jié)下來，所謂的“節(jié)流”蝉衣，是通過在一段時(shí)間內(nèi)無視后來產(chǎn)生的回調(diào)請(qǐng)求來實(shí)現(xiàn)的括尸。只要一位客人叫了車，司機(jī)就會(huì)為他開啟計(jì)時(shí)器病毡，一定的時(shí)間內(nèi)姻氨，后面需要乘車的客人都得排隊(duì)上這一輛車，誰也無法叫到更多的車剪验。
對(duì)應(yīng)到實(shí)際的交互上是一樣一樣的：每當(dāng)用戶觸發(fā)了一次 scroll 事件肴焊，我們就為這個(gè)觸發(fā)操作開啟計(jì)時(shí)器。一段時(shí)間內(nèi)功戚，后續(xù)所有的 scroll 事件都會(huì)被當(dāng)作“一輛車的乘客”——它們無法觸發(fā)新的 scroll 回調(diào)娶眷。直到“一段時(shí)間”到了，第一次觸發(fā)的 scroll 事件對(duì)應(yīng)的回調(diào)才會(huì)執(zhí)行啸臀，而“一段時(shí)間內(nèi)”觸發(fā)的后續(xù)的 scroll 回調(diào)都會(huì)被節(jié)流閥無視掉届宠。
現(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來包裝scroll的回調(diào)
const better_scroll = throttle(() => console.log('觸發(fā)了滾動(dòng)事件'), 1000)
Debounce：最后一個(gè)人說了算
防抖的中心思想在于：我會(huì)等你到底。在某段時(shí)間內(nèi)豌注，不管你觸發(fā)了多少次回調(diào)伤塌，我都只認(rèn)最后一次。
繼續(xù)講司機(jī)開車的故事轧铁。這次的司機(jī)比較有耐心每聪。第一個(gè)乘客上車后，司機(jī)開始計(jì)時(shí)（比如說十分鐘）齿风。十分鐘之內(nèi)药薯，如果又上來了一個(gè)乘客，司機(jī)會(huì)把計(jì)時(shí)器清零救斑，重新開始等另一個(gè)十分鐘（延遲了等待）童本。直到有這么一位乘客，從他上車開始脸候，后續(xù)十分鐘都沒有新乘客上車穷娱，司機(jī)會(huì)認(rèn)為確實(shí)沒有人需要搭這趟車了，才會(huì)把車開走运沦。
我們對(duì)比 throttle 來理解 debounce：在throttle的邏輯里泵额，“第一個(gè)人說了算”，它只為第一個(gè)乘客計(jì)時(shí)茶袒，時(shí)間到了就執(zhí)行回調(diào)。而 debounce 認(rèn)為凉馆，“最后一個(gè)人說了算”薪寓，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來包裝scroll的回調(diào)
const better_scroll = debounce(() => console.log('觸發(fā)了滾動(dòng)事件'), 1000)
用 Throttle 來優(yōu)化 Debounce
debounce 的問題在于它“太有耐心了”向叉。試想，如果用戶的操作十分頻繁——他每次都不等 debounce 設(shè)置的 delay 時(shí)間結(jié)束就進(jìn)行下一次操作嗦董，于是每次 debounce 都為該用戶重新生成定時(shí)器母谎，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。頻繁的延遲會(huì)導(dǎo)致用戶遲遲得不到響應(yīng)京革，用戶同樣會(huì)產(chǎn)生“這個(gè)頁面卡死了”的觀感奇唤。
為了避免弄巧成拙，我們需要借力 throttle 的思想匹摇，打造一個(gè)“有底線”的 debounce——等你可以咬扇，但我有我的原則：delay 時(shí)間內(nèi)，我可以為你重新生成定時(shí)器廊勃；但只要delay的時(shí)間到了懈贺，我必須要給用戶一個(gè)響應(yīng)。這個(gè) throttle 與 debounce “合體”思路，已經(jīng)被很多成熟的前端庫應(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í)間間隔閾值画侣，那就不等了，無論如何要反饋給用戶一次響應(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)
重點(diǎn)來了：在 Vue 里使用 lodash 中的 Debouncing 和 Throttling
事件節(jié)流和防抖是提高性能或降低網(wǎng)絡(luò)開銷的好方法堡妒。雖然 Vue 1曾經(jīng)支持對(duì)事件的節(jié)流和防抖配乱，但是在Vue 2中為了保持核心的簡(jiǎn)單性，刪除對(duì)事件的節(jié)流和防抖的支持涕蚤。因此宪卿，在Vue 2對(duì)對(duì)事件進(jìn)行防抖和節(jié)流我們可以使用 lodash 來做。
可以通過 yarn 或 npm 安裝 lodash万栅。
<script src="lodash.js"></script>
# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save
注意：如果我們不想導(dǎo)入lodash的所有內(nèi)容佑钾，而只導(dǎo)入所需的部分，則可以通過一些Webpack構(gòu)建自定義來解決問題烦粒。還可以使用lodash.throttle和lodash.debounce等軟件包分別安裝和導(dǎo)入lodash的各個(gè)部分休溶。
throttle 方法：第一個(gè)人說了算
throttle API：
_.throttle(func, [wait=0], [options={}])
func (Function): 要節(jié)流的函數(shù)。
[wait=0] (number): 需要節(jié)流的毫秒數(shù)扰她。
[options={}] (Object): 選項(xiàng)對(duì)象兽掰。
[options.leading=true] (boolean): 指定調(diào)用在節(jié)流開始前，默認(rèn)true徒役。
[options.trailing=true] (boolean): 指定調(diào)用在節(jié)流結(jié)束后孽尽，默認(rèn)true。
要對(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(function() {
//注意這里如果使用箭頭函數(shù)的話， this為 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
console.log("throttle");
}, 5000, {
leading: true,
trailing: false
})
}
</script>
testThrottle方法被綁定在一個(gè)按鈕上鸳吸，demo最終的效果是 ：
1熏挎、按鈕點(diǎn)擊后控制臺(tái)立馬打印了throttle——19:39:00；
2晌砾、5秒內(nèi)點(diǎn)擊多次按鈕坎拐，最終只打印一次throttle——19:39:05前；
3养匈、5秒后再點(diǎn)擊一次哼勇，會(huì)重新打印throttle——19:39:05后；
PS：lodash默認(rèn)trailing為true呕乎，那么最終的效果是在點(diǎn)擊時(shí)會(huì)立即打印throttle猴蹂，且5秒后又會(huì)再打印一次，即節(jié)流之前和之后都會(huì)執(zhí)行該節(jié)流函數(shù)楣嘁。
debounce 方法：最后一個(gè)人說了算
盡管節(jié)流在某些情況下很有用磅轻，但一般情況我們經(jīng)常使用的是防抖珍逸。防抖實(shí)質(zhì)上將我們的事件分組在一起，并防止它們被頻繁觸發(fā)聋溜。要在Vue組件中使用節(jié)流谆膳，只需將要調(diào)用的函數(shù)包裝在lodash的_.debounce函數(shù)中。
debounce API：
_.debounce(func, [wait=0], [options={}])
func (Function): 要防抖動(dòng)的函數(shù)撮躁。
[wait=0] (number): 需要延遲的毫秒數(shù)漱病。
[options={}] (Object): 選項(xiàng)對(duì)象。
[options.leading=false] (boolean): 指定在延遲開始前調(diào)用把曼，默認(rèn)false杨帽。
[options.maxWait] (number): 設(shè)置 func 允許被延遲的最大值。
[options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用嗤军，默認(rèn)true注盈。
<template>
<button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
testDebounce: _.debounce(function() {
//注意這里如果使用箭頭函數(shù)的話， this為 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
console.log("debounce");
}, 2000, {
leading: true,
trailing: false
})
}
}
</script>
testDebounce方法被綁定在一個(gè)按鈕上叙赚，demo最終的效果是 ：
1老客、按鈕點(diǎn)擊后控制臺(tái)立馬打印了debounce——19:39:00；
2震叮、5秒內(nèi)點(diǎn)擊多次按鈕胧砰，最終只打印一次debounce——19:39:05前，假設(shè)19:39:04完成了最后一次點(diǎn)擊苇瓣；
3尉间、相對(duì)于最后一次點(diǎn)擊的5秒后再點(diǎn)擊一次，會(huì)重新打印debounce——19:39:09后击罪；
PS：lodash默認(rèn)leading為false哲嘲、trailing為true，那么最終的效果是在點(diǎn)擊后等待5秒才會(huì)打印debounce外邓，即延遲之前不執(zhí)行函數(shù)撤蚊，而是在延遲之后執(zhí)行古掏。
