Question

问题：寻找一种方法来获取常规事件发射（每200毫秒说一次），同时用户将DOM元素悬停在角度5上的RxJs上。

实际上，通过简单的JS使用mouseover时，angular或RxJ不会产生常规事件，并且行为与浏览器不同。使用debounce对事件发射没有帮助。

因此，我想改为使用mouseenter和mouseleave事件以及它们之间的计时器。但是我不知道如何从事件中启动和停止计时器。

（错误的）代码优于1000个单词：

// RxJs syntax in typescript for angular
const enter = fromEvent(nativeElement, "mouseenter");
const leave = fromEvent(nativeElement, "mouseleave");

// Bad code, just an idea
enter.pipe(
  merge(interval(200 /* ms */)),
  takeUntil(leave)
).subscribe(event => console.log("hovering", event));

您知道是否可以在每个mouseenter之后开始间隔发射？

对于库，我在打字稿2.5上将 RxJs 5 与Angular 5结合使用。

Answer 1

我认为你非常亲密。代替merge，您应该使用mergeMap，它仅在interval发射后才订阅enter Observable。然后，您可能还希望使用repeat()，它会在每次发射leave之后重复该过程（但是，这取决于使用/调用此代码的方式）。

enter.pipe(
  mergeMap(() => interval(200 /* ms */)),
  takeUntil(leave),
  repeat(),
).subscribe(event => console.log("hovering", event));

请参阅演示：https://stackblitz.com/edit/rxjs6-demo-nrb7km?file=index.ts

DOM悬停时有规律的可观测发射

1 个答案: