封装的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回答

双越

2022-07-15

首先封装一个 debounce 函数,然后在 Vue 的 methods 中这样写

{
    methods: {
        fn: debounce(function() {
            // 函数体
        })
    }
}

然后,在 mounted 中调用 this.fn 就可以实现 debounce

0
1
小小Yu
非常感谢!谢谢老师
2022-07-15
共1条回复

一天时间高效准备前端技术一面 匹配大厂面试要求

针对时下面试高频考点,帮助新人js面试快速通关

4694 学习 · 1681 问题

查看课程