鼠标或单击活动重新启动时的示例 RxJS Observable

问题描述：

我可以创建 2 个 observables 来观察鼠标移动和点击事件:

I'm able to create 2 observables to watch mouse move and click events as such:

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

我还可以使用 merge() 和 debounceTime() 来等待 mousemove 或 click 不会发生 10 秒，如下所示:

I'm also able to use merge() and debounceTime() to wait for either mousemove or click to not happen for 10 seconds like this:

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

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

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

However, I would like to somehow construct an observable for when a user Re-starts either moving the mouse or clicking after this 10 second debounceTime() limit.

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

Could someone help me construct this Observable? I think I'm missing something simple.

答

你可以这样使用:

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

说明

Rx.Observable.of('Kick off') - 一旦开始，...
.merge(lastact$) - 并且每次 lastact$ 发出，...
.mergeMap(() => ...) - 创建一个可观察的 ...
allactivity$ - 将在 allactivity$ 上观察所有项目...
.skipUntil(lastact$) - 从第一次lastact$ 发射开始(在这个 observable 创建之后)......
.first() - 只取第一项(即第一个活动发生在 lastact$ 发出之后)

Explanation

Rx.Observable.of('Kick off') - Once in the beginning, ...
.merge(lastact$) - and for everytime lastact$ emits, ...
.mergeMap(() => ...) - create an observable ...
allactivity$ - that will observe on allactivity$ for all items...
.skipUntil(lastact$) - since the firstlastact$ emission (after the creation of this observable) ...
.first() - and take only the first item (that is, the first activity happen after the lastact$ emit)

上面的 observable 不会在第一次鼠标移动时触发，以处理:

The above observable will not trigger on the first mouse move, to handle that:

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

鼠标或单击活动重新启动时的示例 RxJS Observable

说明

Explanation

相关推荐