StencilJS：如何去抖动听众

Question

我想去抖以下监听器：

  @Listen('mousemove')
  mouseMove(event) {
    ...
  }

我还没有在文档中找到实现它的方法，有什么想法吗？

Answer 1

据我所知，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
}

不要忘记删除不再需要的活动。

Answer 2

你可以用你自己的方式去抖。

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.

没有被调用

然后您的超时回调将运行。

StencilJS：如何去抖动听众

StencilJS : How to debounce listeners

javascript

stenciljs