input 防抖事件

xiaomi486
  • 2
新手上路,请多包涵

问题描述

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 }

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

clipboard.png

回复
阅读 1.3k
2 个回答
✓ 已被采纳

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

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

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

listChange() {
if(!this._debounce) {
   this._debounce= this.debounce(
     this.getdata()
  , 5000)
}
this._debounce();
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏