-
定义防抖函数:首先,你需要一个防抖函数。防抖函数会接收一个需要被防抖的函数作为参数,并返回一个新的函数。这个新函数在被调用时会等待指定的时间间隔,如果在这段时间内再次被调用,则重新计时。
-
在Vue组件中使用:然后,在你的Vue组件中,你可以使用这个防抖函数来包装你的点击事件处理函数。
代码示例:
给元素添加点击事件:
<el-button type="primary" @click="debouncedSubmit">保存</el-button>
方法:
export default {
data() {
return {
debouncedSubmit: null,
};
},
created() {
// 在组件创建时设置防抖函数
this.debouncedSubmit = this.debounce(this.submit, 1000);
},
methods: {
//防抖函数
debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
},
submit() {
//调用保存接口api
},
},
};