示例 RxJS Observable 当鼠标或单击 activity 重新启动时

Question

我能够创建 2 个 observables 来观察鼠标移动和点击事件：

var mousemove$ = Rx.Observable.fromEvent(document, 'mousemove');
var click$ = Rx.Observable.fromEvent(document, 'click');

我还可以使用 merge() 和 debounceTime() 来等待鼠标移动或点击不发生 10 秒，如下所示：

var allactivity$ = Rx.Observable.merge(
    mousemove$.mapTo('Mouse!'),
    click$.mapTo('Click!')
  );

var lastact$ = allactivity$.debounceTime(10000);

但是，我想以某种方式构造一个可观察对象，以便用户在这 10 秒的 debounceTime() 限制后重新开始移动鼠标或单击。

有人可以帮我构建这个 Observable 吗？我想我错过了一些简单的东西。

Answer 1

你可以使用这样的东西：

var restart$ = Rx.Observable.of('Kick off')
  .merge(lastact$)
  .mergeMap(() => allactivity$.skipUntil(lastact$).first());

说明

Rx.Observable.of('Kick off') - 一开始，...
.merge(lastact$) - 每次 lastact$ 发出，...
.mergeMap(() => ...) - 创建一个 observable ...
allactivity$ - 将在 allactivity$ 观察所有项目...
.skipUntil(lastact$) - 自第一次lastact$ 发射（在创建此 observable 之后）...
.first() - 只取第一项（即第一个 activity 发生在 lastact$ 发出之后）

编辑：

上面的 observable 不会在鼠标第一次移动时触发，要处理这个问题：

var firstMoveAndRestart$ = restart$.merge(allactivity$.first());

示例 RxJS Observable 当鼠标或单击 activity 重新启动时

Example RxJS Observable when mouse or click activity Re-starts

rxjs

rxjs5

说明