在第一个事件被触发之后，如何执行第二个事件

Question

在触发第一个事件后，是否有方法执行第二个事件？

在下面的例子中，我想在调用touchmove事件后使用滚动事件。

fromEvent(window, 'touchmove').pipe(
tap(() => this.scroll$.next(false),
debounceTime(100)
).subscribe(() => {
this.scroll$.next(true);
})

Answer 1

如果您的scroll$Observable可以依赖于其他可观察性，并且不必是Subject，则可以让它直接依赖于fromEventObservable。

private sroll$ = fromEvent$(window, 'touchmove').pipe(
switchMapTo(
merge(
of(false),
timer(100).pipe(mapTo(true))
)
)
)

scroll$Observable由fromEvent$(window, 'touchmove')Observable触发。然后我们把switchMapTo转换成一个组合算子merge:

• 通过这种方式，我们可以通过创建仅具有of(false)值的Observable来立即返回false值
• 此外，我们可以启动timer，在100毫秒后激发true

Answer 2

如果你真的不能使用touchstart和touchend，唯一的方法就是使用debounceTime管道

const mousemove$ = fromEvent(document, 'mousemove');
mousemove$
.pipe(
first(),
switchMap(() => mousemove$),
tap(() => this.scroll$.next(false)),
debounceTime(1000)
)
.subscribe(() => {
this.scroll$.next(true);
});

Stacklitz演示