angular – 如何手动停止Observable间隔？

发布时间：2020-12-17 17:56:36 所属栏目：安全来源：网络整理

导读：我目前正在尝试制作这样的20秒计时器： this.timer = Observable.interval(1000).take(20).map((tick) = tick+1).subscribe((tick) = { this.reverseTimer = 20-tick;}) 如果我让Observable每次都达到20,这很好,但有时候,我想提前结束计时器.现在,我不能停止

我目前正在尝试制作这样的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()但是我得到的错误是取消订阅对于计时器不存在.

解决方法

你应该看看 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!