使用setInterval的可观察计时器

时间:2018-02-06 05:20:39

标签: angular google-chrome observable setinterval countdown

显然,当我在Chrome中使用Observable.timer时,我会遇到一些奇怪的行为。我正在使用倒计时组件,从特定时间倒计时到0。当我在一个标签中执行倒计时,用另一个标签更改并稍后返回原始标签时,倒计时似乎执行速度较慢。我认为这是一个相关的问题here

如果我使用setInterval代替Observable.timer,它会起作用吗?如果是这样,我该如何更改我的代码?非常感谢帮助。

import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'
import { Observable, Subscription } from 'rxjs/Rx';

@Component({
  selector: 'countdown',
  template: '{{ countDown | async | formatTime }}'
})
export class CountdownComponent implements OnInit {
  @Input() seconds: string;
  @Output() checkTime: EventEmitter<number> = new EventEmitter();
  countDown: any;

  constructor() {}

  ngOnInit() {
    const start = parseInt(this.seconds, 10);
    this.countDown = Observable.timer(0, 1000)
                .map(i => start - i) // decrement the stream's value and return
                .takeWhile(i => i >= 0)
                .do(s => this.checkTime.emit(s)) // do a side effect without affecting value
  }
}

0 个答案:

没有答案