原理
防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
情况
像仿百度搜索，就应该用防抖，当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。
场景
按钮提交场景：防止多次提交按钮，只执行最后提交的一次 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似
解决
创建的防抖函数,不是在methods里面定义,而是写在data里面定义. 然后在created()或者beforeMount()创建防抖方法,接着把原来的方法替换成防抖方法即可.
<template>
<div class="content">
<input type="text" placeholder="请输入文字" v-model="content" />
</div>
</template>
<script>
// 定义防抖函数
const debounce = (func, wait = 50) => {
// 缓存一个定时器id
let timer = 0;
// 这里返回的函数是每次用户实际调用的防抖函数
// 如果已经设定过定时器了就清空上一次的定时器
// 开始一个新的定时器，延迟执行用户传入的方法
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, wait);
};
};
export default {
data() {
return {
content: '',
debounceChange: undefined
};
},
created() {
this.debounceChange = debounce(this.getAdd, 800);
},
watch: {
content(val) {
this.debounceChange();
}
},
methods: {
getAdd() {
console.log('防抖');
}
}
};
</script>
