相似点：都是为应对事件持续频繁发生，造成前端性能下降或对后端服务造成的压力。
区别：节流会不断的触发，而防抖仅在最后一次触发。防抖适用于，如搜索输入框提示，仅在输入停止后进行一次提示更新，以减少后台压力。节流适用于，如窗体以拖动的方式调整大小，在每次特定的时间片结束后触发一次窗体大小调整。
防抖
原理： 当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。
使用场景： 频繁触发按钮点击事件、input框搜索等等。
主要代码如下：
<el-form-item label="整机名称" prop="name" class="filter-item">
<el-input v-model.trim="queryForm.name" placeholder="请输入" @input="handleInputChange"></el-input>
</el-form-item>
// methods
import { debounce } from '@/utils/common.js';
handleInputChange: debounce(() => {
console.log(new Date());
}, 1000)
// common.js
/**
* 函数防抖: 当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。
* @param {*} func
* @param {*} wait
* @returns { Function }
*/
export const debounce = (func, wait) => {
let delay = wait || 500;
let timer;
return () => {
const _this = this;
let args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
func.apply(_this, args)
}, delay)
}
}
节流
原理： 规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。比如两秒内的点击事件，无论点多少次，两秒内只执行一次。
使用场景： 下拉加载更多（无限滚动）事件、浏览器的resize，scroll事件等等
主要代码如下：
// button
<el-form-item class="filter-item">
<el-button type="primary" @click="handleSubmit">提交</el-button>
</el-form-item>
// methods
handleSubmit: throttle(() => {
console.log(new Date());
}, 2000),
// common.js
/**
* 函数节流: 规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。
* @param {*} func
* @param {*} wait
* @returns { Function }
*/
export const throttle = (func, wait) => {
let delay = wait || 500;
let timer;
return () => {
let _this = this;
let args = arguments;
if(!timer) {
timer = setTimeout(() => {
func.apply(_this, args);
timer = null;
}, delay)
}
}
}
