有些瀏覽器事件可以在短時間內快速觸發多次，例如調整視窗大小或向下捲動頁面。例如，監聽頁面視窗捲動事件，而且使用者持續快速地向下捲動頁面，那麼捲動事件可能會在 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中怎麼對事件進行防手震和節流操作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
