DOM 悬停时定期观察发射

Question

问题：寻找一种方法来获得定期事件发射（比如每 200 毫秒），同时用户将 DOM 元素与 RxJs 悬停在 angular 上 5.

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

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

类似于 this solution in JQuery，但带有可观察值。

一个（坏）代码胜过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

我觉得你们很亲密。您应该使用 mergeMap 而不是 merge，它仅在 enter 发出后才会订阅 interval Observable。那么您可能还想使用 repeat() ，这将在每次 leave 发射后重复该过程（但是，这取决于 use/call 此代码的方式）。

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 悬停时定期观察发射

Regular observable emission while DOM hovering

observable

rxjs

rxjs5

angular2-observables

angular