Question

我正在尝试使用Observable计时器创建一个简单的计数器。外部时间每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();

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

解决方案

1 个答案: