vue——debounce防抖函数无效

参考：

vue记录-vue中使用lodash _.debounce防抖不生效原因，解决方案

https://blog.csdn.net/Delete_89x/article/details/122000444

 

我的情况：搜索关键词时，输入框输入123，会搜索1，12，123，debounce防抖无效

 

问题代码：

<el-input
    v-model="condition"
    placeholder="请输入"
    @input="inputChange"
></el-input>

...

load() {
      // 搜索列表
},
// 问题处
inputChange() {
    debounce(this.load())
},  

　　

 

封装的debonce函数：

/**
 * 防抖函数 短期内大量触发同一事件，只会执行最后触发的一次
 * @param {Function} fn 需要防抖的函数
 * @param {Number} delay 毫秒，防抖期限值
 */
export const debounce = (fn, delay = 500) => {
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
};

 

原因：debounce()返回的是一个函数，一个完成的执行应该是：debounce()()，问题代码直接单纯的调用一次，拿到了返回函数，但是并没有执行

解决方法：执行返回的函数

 

修改后的代码：

methods:{
    /**
     * inputChange拿到debounce()的返回结果 - 函数
     * 这样input事件触发的时候就直接是debounce()()了，所以是可以正常执行的
     */
    inputChange: debounce(function () { // 注意，不要在debounce里写箭头函数，否则this的指向就是undefined，而不是Vue实例对象
        this.load();
    }),
}