DOM 悬停时有规律的可观察发射答案

【问题标题】：Regular observable emission while DOM hoveringDOM 悬停时有规律的可观察发射
【发布时间】：2019-01-04 09:05:20
【问题描述】：

问题：当用户将带有 RxJs 的 DOM 元素悬停在 Angular 5 上时，寻找一种获得常规事件发射（例如每 200 毫秒）的方法。

实际上，通过简单的 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 之后开始间隔发射？

对于库，我在 typescript 2.5 上使用 RxJs 5 和 Angular 5。

【问题讨论】：

标签： angular rxjs observable rxjs5 angular2-observables

【解决方案1】：

我认为你非常接近。你应该使用mergeMap 而不是merge，它只会在enter 发射后订阅interval 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

【讨论】：

那个！太感谢了。 repeat() 方法是否会产生任何内存泄漏？
@Bérenger-appvizer- 这不太可能。但是如果你在组件中使用它，你应该保留订阅const sub = enter.pipe(...).subscribe()，并在销毁组件时取消订阅sub.unsubscribe()