在Vue項目中，處理高頻事件的優化至關重要，直接影響用戶體驗和應用性能。防抖（Debounce）和節流（Throttle）是兩種常用且有效的方法，可以控制事件觸發頻率，減少不必要的資源消耗。如何在Vue項目中高效地實現防抖和節流，是每個開發者需要掌握的實戰技巧。本文將結合具體的Vue實例，詳細介紹如何靈活應用這兩種技術，幫助開發者在實際項目中提升前端性能和用戶體驗。

目錄

1 安裝和引入

2 防抖的調用學習?

3 節流的調用學習

4 使用方法總結?

---

1 安裝和引入

執行安裝命令

npm i?js-tool-big-box

項目中引入（Vue項目），工具包對外提供了?eventBox 對象，可以用來調用防抖和節流的方法。

import { eventBox } from 'js-tool-big-box';

2 防抖的調用學習?

防抖呢，比如說一個人頻繁在輸入框輸入值，然后我們需要去判斷它輸入的手機號對不對，郵箱對不對，后者拿著這個輸入值去發送Ajax請求去查東西，肯定不能輸入一個字符就趕緊拿著去查，對吧，所以就需要防抖。

防抖呢就是設定一個時間值，比如2秒，你在這2秒內有操作，就取消，一直到2秒后沒有操作了，再去執行任務。

比如等電梯，早上著急打卡的同學們，越著急，越有人按電梯，有人按一下就得等5秒，除非有人急的不行了，按了關閉按鈕。所以，等5秒，沒人上了，電梯關閉，開始往上走。如果第4秒又有人按按鈕，他進來了，那么就再等5秒吧。

<template><div><input @keyup="handleChange" v-model="inputVal" /></div>
</template><script>
import { eventBox } from 'js-tool-big-box';export default {name: 'dj',data () {return {inputVal: ''}},created() {this.myDebounce = eventBox.debounce((data) => {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val = event.target.value;this.myDebounce(val);},sendAjax(data) {console.log('發送時間：：', new Date().getTime());console.log('發送請求：', data);},}
}
</script>

在截圖中，我分別輸入了1? ?222 333 ，其中222和333是頻繁輸入的，然后只調用了一次

3 節流的調用學習

節流呢，就像坐火車，人來人往的車站，川流不息的人群，但火車有時刻表，隔多久一趟車。下拉刷新就正好用到這個地方。

<script>
import { eventBox } from 'js-tool-big-box';export default {name: 'dj',data () {return {inputVal: ''}},created() {this.myThrottle = eventBox.throttle((data) => {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val = event.target.value;this.myThrottle(val);},sendAjax(data) {console.log('發送時間：：', new Date().getTime());console.log('發送請求：', data);},}
}
</script>

看這個時間戳打印的，我一直在頻繁輸入，然后他隔一段時間才執行一次，不錯不錯，節流了。

4 使用方法總結?

方法名	返回值	入參
debounce	傳入的執行方法	第一個參數必填，表示需要執行的方法， 第二個參數非必填，表示需要延遲執行的時間，可不傳，默認300毫秒
throttle	傳入的執行方法	第一個參數必填，表示需要執行的方法， 第二個參數非必填，表示需要延遲執行的時間，可不傳，默認300毫秒