防抖函数:
/**
* [防抖函数]
* @param {func} Function [需要执行的函数]
* @param {wait} Number [间隔时间]
* 组件内调用:this.$utils.debounce(this.aa, 1000)();
*/
debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if(timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
},wait);
};
}
组件内调用:this.$utils.debounce(this.aa, 1000)(); 感觉有点奇怪。
打比方我现在给以下结构绑一个input事件
html
<input type="text" @input="change" >
js
methods: {
change() {
this.$public.debounce(this.aa, 1000)();
},
aa() {
this.bb = 5;
console.log(this.bb);
},
}
执行效果并不理想, 连续输入触发input事件并不会等我完全输入完才打印出5 。 感觉这并不是防抖呀,有没有封装过的大佬给点建议
你对 debounce 的理解有问题,debounce 返回的函数,多次触发会有 debounce 功能,比如这样
你在 change 里,每次生成一个新的函数,并调用,当然会有问题;
this.$public.debounce 这个用法也不合适,可以直接把工具函数放到 @/utils 目录里,然后需要用某个函数,就引入某个函数
这样打的包体积可能会更小更合适