RxJS setTimeout 运算符等效

Question

在这种特定情况下，是否有一个 RxJS 运算符可以替代 set/clearTimeout：

this.mouseEnterSubscription = this.mouseEnterStream
  .subscribe(() => {
    this.timeout = setTimeout(() => {
      void this.playVideo();
    }, 500)
});

this.mouseLeaveSubscription = this.mouseLeaveStream.subscribe(() => {
  this.pauseVideo();
  clearTimeout(this.timeout);
});

Answer 1

您可以创建一个处理

mouseenter

和

mouseleave

行为的可观察对象，而不是为每个流单独订阅。

您可以使用

debounceTime

延迟发射，直到指定的时间过去而没有收到新的发射，并且您可以使用

switchMap

处理订阅第二个流：

const videoPlayerSubscription = mouseEnterStream.pipe(
  debounceTime(500),
  tap(() => playVideo()),
  switchMap(() => mouseLeaveStream),
  tap(() => pauseVideo())
).subscribe()

这是一个 StackBlitz 示例。