封装的debounce在vue中调用

Question

老师好，我在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);
    },

以上，麻烦老师协助查看一下~

Answer 1

双越 2022-07-15 15:02:36

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

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

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

• 提问者 小小Yu #1

  非常感谢！谢谢老师