input 防抖事件

Question

问题描述

watch绑定的值，使用防抖函数减少发送请求的次数，但发送请求的次数并没有变化

问题出现的环境背景及自己尝试过哪些方法

一开始以为防抖函数写得不对，更换了不少方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
防抖函数：

var debounce = function (func, wait) {
  let timeout
  return function () {
    var context = this
    var args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait)
  }
}

源码：

export default {
  props: ["data"],
  data() {
    return {
      list: ""
    };
  },
  methods: {
    getdata() {
      getSuggest(this.data)
        .then(res => {
            console.log(1)
          console.log(res.result.allMatch);
          this.list = res.result.allMatch;
        })
        .catch(err => {
          console.log(err);
        });
    },
    listChange() {
      this.debounce(
         this.getdata()
      , 5000)
    }
  },
  watch: {
    data() {
      
       this.listChange()
    }
  }
};
export { debounce }

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

debounce接收一个函数，返回一个函数。你每次运行debounce，都会返回一个新的函数，因为闭包原因，函数中引用的timeout不是同一个，所以不会清除定时器

另外，debounce接收一个函数，this.getdata()的结果是undefined，不是一个函数，这是个错误，和这个bug无关

你可以定义一个全局的timeout，也可以在created中写死一个debounce，而不是每次都返回新的

Answer 2

listChange() {
if(!this._debounce) {
   this._debounce= this.debounce(
     this.getdata()
  , 5000)
}
this._debounce();
}