Question

我目前正在尝试制作这样的20秒计时器：

this.timer = Observable.interval(1000).take(20).map((tick) => tick+1).subscribe((tick) => {
    this.reverseTimer = 20-tick;
})

如果我让Observable每次都达到20，这很好，但有时，我想提前结束计时器。现在，我不能停止计时器，直到它在20秒后自动停止。

现在，当我希望它停止时，我将计时器隐藏在显示器中，但我需要它才能重新启动。如果我尝试在20秒之前重新启动计时器，reverseTimer在新计时器和旧计时器值之间闪烁，因为我还没有停止旧计时器。

我已经尝试了this.timer.unsubscribe()，但我收到了unsubscribe对于计时器不存在的错误。

Answer 1

您应该查看Timer运算符。您可以创建一个在给定延迟后发出特定项目的Observable。您可以轻松创建倒计时系统。

在这个例子中，我将创建一个计时器，然后在5秒后停止它。

const start = 20;

const source = Rx.Observable
  .timer(1000, 1000)
  .map(tick => start - tick)
  .take(start + 1)
  .subscribe(tick => console.log(tick));


setTimeout(() => {
  //Stop the timer
  source.unsubscribe();
}, 5000);

您可以看到Working plunkr

Answer 2

如果您在致电unsubscribe时收到的结果中不存在subscribe，则您可能正在使用RxJS 4.在这种情况下，您将收到{{1}实例，应调用IDisposable来停止计时器：

dispose

如何手动停止Observable间隔？

2 个答案: