节流函数的理解不知道是否正确?
来源: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接收的是在输入框里面输入的内容。可以打印一下看看。
3、this指向函数的调用者。当debounce函数调用时,返回的是他内部的匿名函数,
query接收的也就是返回的匿名函数,因为是search-box这个组件监听的query,所以this指向的就是search-box这个组件
可以打印一下看看:
关于这块内容,可以与同学的另一个问答参考理解,视频链接:https://class.imooc.com/course/qadetail/146256
如果帮助到了你,欢迎采纳~祝学习愉快~
相似问题