如何解决StencilJS:如何去抖动监听器
我想对以下侦听器进行去抖:
@Listen('mousemove')
mouseMove(event) {
...
}
我还没有在文档中找到方法,有什么想法吗?
解决方法
据我所知,Stencil 不包含去抖动功能。
我通常使用 throttle-debounce 包并自己监听事件,不使用 @Listen
装饰器:
connectedCallback() {
this.debouncedResize = debounce(200,false,() => {
this.onResize();
});
window.addEventListener('resize',this.debouncedResize);
}
disconnectedCallback() {
window.removeEventListener('resize',this.debouncedResize);
}
onResize() {
// do some work
}
不要忘记删除不再需要的事件。
,您可以按照自己的方式去抖动。
class MyComponent {
private debounce: ?number = null;
@Listen('mousemove')
mouseMove(event) {
if (this.debounce !== null) {
clearTimeout(this.debounce);
this.debounce = null;
}
this.debounce = window.setTimeout(() => {
// your debounced traitment
this.debounce = null;
},200);
}
}
这里的目标是使用标志 debounce
来保留您的去抖动特征的参考。
因为您的 mouseMove
方法将被多次调用,它会取消之前的堆栈超时,直到 mouseMove
至少 200ms
没有被调用。
然后将运行超时内的回调。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。