@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


01-15 03:53
查看更多