封装的debounce在vue中调用
来源:16-8 手写防抖 debounce

小小Yu
2022-07-15
老师好,我在vue项目中练习手写防抖,遇到以下问题,麻烦帮忙看下~
<input type=“text” @input=“handleChange($event)” id=“input1” />
handleChange(e) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log("e==", e.target.value);
timer = null;
}, 500);
},
这样是可行的。
将debounce封装后,在mounted里调用也是可行的:
// 封装的debounce
debounce(fn, delay = 500) {
let timer = null;
return () => {
if (timer) {
clearTimeout(timer);
}
console.log("timer", timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
};
},
mounted() {
let input1 = document.getElementById("input1");
input1.addEventListener(
"keyup",
this.debounce(() => {
console.log("e333333333333==", input1.value);
}, 1000)
);
},
但是在handleChange中调用封装的debounce却不能打印:
handleChange(e) {
let val = e.target.value;
this.debounce(() => {
console.log("eeeeeeeeeee==", val);
}, 1000);
},
以上,麻烦老师协助查看一下~
写回答
1回答
-
首先封装一个 debounce 函数,然后在 Vue 的 methods 中这样写
{ methods: { fn: debounce(function() { // 函数体 }) } }
然后,在 mounted 中调用 this.fn 就可以实现 debounce
012022-07-15
相似问题