节流函数的理解不知道是否正确?
来源: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
如果帮助到了你,欢迎采纳~祝学习愉快~
相似问题