节流函数的理解不知道是否正确?

来源:2-1 搜索框组件

soso_crazy

2019-08-20 16:42:55

// 函数节流
export const debounce = (func, delay = 200) => {
  let timer = null;

  return function (...args) {
    // 清除上一次的定时器
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      // 延时时间到了之后执行需要执行的函数
      func.apply(this, args);
    }, delay);
  };
};

watch:{

query: debounce(function () {
 this.$emit('query', this.query);
})

}

1.不知道我的理解是否正确?:

在search-box中监听query的变化时调用节流函数,query值的变化,会触发debounce函数。其实就是延迟200ms执行function () {this.$emit('query', this.query);}。query变化的变化值会传递给args接收,但是这里的function () {this.$emit('query', this.query);}没有参数接收args,只是单纯地派发事件

2.其实我还是搞不懂为什么debounce内部返回的函数参数args接收的是谁的内容?为什么?

3.func.apply(this,args)中的this指的是谁?




写回答

1回答

好帮手慕言

2019-08-20

同学你好,

1、第一问理解的是正确的。

2、args接收的是在输入框里面输入的内容。可以打印一下看看。

http://img.mukewang.com/climg/5d5bd96100013de913170897.jpg

3、this指向函数的调用者。当debounce函数调用时,返回的是他内部的匿名函数,

http://img.mukewang.com/climg/5d5bdc8a00010a7606920362.jpg

query接收的也就是返回的匿名函数,因为是search-box这个组件监听的query,所以this指向的就是search-box这个组件

http://img.mukewang.com/climg/5d5bdcf00001f3c805310162.jpg

可以打印一下看看:

http://img.mukewang.com/climg/5d5bdd96000168a412300326.jpg

关于这块内容,可以与同学的另一个问答参考理解,视频链接:https://class.imooc.com/course/qadetail/146256

如果帮助到了你,欢迎采纳~祝学习愉快~

0

0 学习 · 10739 问题

查看课程