如何手动停止Observable间隔？

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