@debounce
防抖动函数:当调用函数n秒后,才会执行该动作,若在这n秒内又调用该函数则将取消前一次并重新计算执行时间。
使用实例
例如在监听id为editor的编辑器输入时,每次输入都会触发oninput
事件,调用this.updateContent
方法。为了防止频繁地更新content,可以对updateContent
装饰debounce方法,在输入的过程中不会去更新this.content
,直到输入完成500毫秒后,再去一次性更新content内容。
源码
调用参数
在调用的时候支持传入wait和options.immediate两个参数:
- wait: 等待执行的时间,单位ms,默认值300
- {immediate}: 绑定的函数是否先执行,默认值false,等待wait时间后再执行;传递的参数为true时先执行
Meta对象
metaFor
方法给当前实例增加了Symbol('__core_decorators__')
属性,值为一个Meta对象。
Meta类如下所示,包括debounce和throttle用到的一些属性:
使用了@lazyInitialize
标记,可以使得每次只初始化被用到的属性,像debounce的时候只用到debounceTimeoutIds属性。console输出Meta对象,结构如图所示,可以看到只初始化了debounceTimeoutIds属性:
debounceTimeout存储
执行的结果就是:每次都重新等待wait时间,再去执行callback方法,callback即是key值对应的方法。
原文:大专栏 core-decorators源码简析——debounce