Question

我必须在Angular中制作一个计时器，目前我正在通过Observable进行如下操作：

  timer: Observable<any> = Observable.timer(0, 990);
  timerSubscription: Subscription;

  this.timerSubscription = this.timer.subscribe((value) => {
    this.tickerFunc();
  }); // inside ngOnInit

  tickerFunc () {
    this.timeNow++;

    this.timeNowInMinutes = Math.floor(this.timeNow / 60);

    if (this.timeNow >= this.TimeLimit) {
      this.finishtest();
    }
  }

所以我在这里有两个问题：

1）使用Observable的计时器是好还是我应该使用setInterval（）方法，还是两者都具有相同的性能？

2）正如您所看到的，每次计时器滴答时，我必须进行两次计算：

首先：我必须将秒数转换为分钟。

第二：我必须检查计时器是否已达到时间限制，如果是，请取消订阅计时器。

我的两个问题都与使计时器尽可能准确有关。（尽可能准确地接近实时）。正如您所注意到的，我已经给出了990毫秒而不是1000毫秒的时间间隔来覆盖由于tickerFunc（）体内的计算而发生的时间损失。

Answer 1

严格地说，在给定的时间间隔之后执行一个函数，Observable可能有点矫枉过正，但是因为你需要操作那个时间间隔它应该是一个很好的用例：

import { timer } from 'rxjs/observable/timer';
import { take } from 'rxjs/operators';

timer(0, 990).pipe(
    take(this.timeLimit),
)
.subscribe((v) => this.timeNowInMinutes = Math.floor(v / 60),
           (err) => console.log(err),
           () => this.finishTest());

注意我已经使用了take运算符只有所需数量的事件，并在完成的回调中调用了finishTest。

我已经使用了RxJs 5.5提供的新lettable运算符，代码与旧版本非常相似。

您也可以删除订阅并在Angular中使用异步管道，但在这种情况下，对finishTest的完成调用有点隐藏：

const $timerStream = timer(0, 990).pipe(
    take(this.timeLimit),
    map(v => Math.floor(v + 60 / 60)),
    tap(v => v === this.timeLimit ? this.finishTest() : undefined),
);

您可以使用map将值转换为您需要的值（注意我已经添加+ 60以确保它们正在增加，您可以添加timeNow中的任何初始值）并使用async管道在模板中呈现此值。点击方法（以前称为do）将检查它是否是最后一个项目，如果是，则调用finishTest。

setInterval vs Observable的计时器方法，最好创建计时器

1 个答案: