在前端開發中，防抖（Debounce）和節流（Throttle）是兩種常用的性能優化技術，尤其在處理頻繁觸發的事件時顯得尤為重要。無論是在用戶輸入、窗口調整大小，還是滾動事件中，這兩種技術都可以有效減少函數執行的頻率，從而提升網頁的響應速度和用戶體驗。在本文中，我們將深入探討防抖和節流的原理、應用場景及其實現方法，幫助開發者更好地掌控這兩種優化手段。

?現在好啦，js-tool-big-box工具包提供出了這個兩個方法，并有專門的團隊進行維護公有方法，大家可以直接調用，減少了自己的代碼量，可以有更多的時間去專注于自己的業務開發。

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毫秒