鼠标或单击活动重新启动时的示例 RxJS Observable [英] Example RxJS Observable when mouse or click activity Re-starts
问题描述
我可以创建 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$
发出之后)Rx.Observable.of('Kick off')
- Once in the beginning, ....merge(lastact$)
- and for everytimelastact$
emits, ....mergeMap(() => ...)
- create an observable ...allactivity$
- that will observe onallactivity$
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 thelastact$
emit)
Explanation
上面的 observable 不会在第一次鼠标移动时触发,以处理:
The above observable will not trigger on the first mouse move, to handle that:
var firstMoveAndRestart$ = restart$.merge(allactivity$.first());
这篇关于鼠标或单击活动重新启动时的示例 RxJS Observable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!