javascript - 如何使用 rxjs 取消内部可观察计时器？

Question

我正在尝试使用可观察计时器制作一个简单的计数器。外部时间每 5 秒运行一次。内部计时器每秒运行一次，因为我想输出如下所示的内容:

正在加载..5

正在加载..4

正在加载..3

...

但我的问题是内部可观察对象不会取消。它无限地继续下去。这样做的正确方法是什么？

Observable.timer(0, 5000)
  .pipe(
    tap(() => {
      Observable.timer(0, 1000)
        .subscribe(t => console.log(5 - t));
    }),
    tap(t => {
      this.count = this.users.length;
    }),
  ).subscribe();

解决方案

使用 switchMap 运算符取消外部可观察

Observable.timer(0, 5000)
  .pipe(
    switchMap(() => {
      return Observable.timer(0, 1000);
    }),
    tap(t => {
      console.log(`%c`, 'background:red', 5 - (t));
      this.count = this.users.length;
    }),
  ).subscribe();

Answer 1

我认为您正在寻找的是 take 运算符，请参阅 [ http://reactivex.io/documentation/operators/take.html](the文档)以获得进一步的解释。您可以使用 take(5) 或 take(6)，具体取决于您想要倒数到 0 还是 1。

Observable.timer(0, 5000)
  .pipe(
    tap(() => {
      Observable.timer(0, 1000)
        .take(5)
        .subscribe(t => console.log(5 - t));
    }),
    tap(t => {
      this.count = this.users.length;
    }),
  ).subscribe();