RxJS间隔函数对于时间测量似乎不准确

Question

出于学习目的，我试图在Angular中使用RxJS interval()函数构建秒表，但这是我得到的：

使用

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-stopwatch',
  templateUrl: './stopwatch.component.html',
  styleUrls: ['./stopwatch.component.css']
})
export class StopwatchComponent implements OnInit {
  msCounter = interval(1);
  ms = 0;
  ms1 = 0;

  secCounter = interval(1000);
  sec = 0;

  centCounter = interval(100);
  cent = 0;

  ngOnInit() {
    this.secCounter.subscribe(value => this.sec = value);
    this.msCounter.subscribe(value => this.ms = Math.floor(value / 1000));
    this.msCounter.subscribe(value => this.ms1 = value );
    this.centCounter.subscribe(value => this.cent = value );
  }


}

您会看到秒数与毫秒数也不匹配，毫秒数也不与毫秒数匹配。

Answer 1

以这种方式，间隔计时器无法精确到毫秒。

间隔的每次发射都将在新的JS“框架”上，因此Angular必须在下一个可能的机会之前完成完整的更改检测周期，依此类推（因为您正在更改视图绑定的属性）间隔开火。在几乎所有情况下，这将花费超过1毫秒的时间。

值得理解的是，给定网页在Javascript运行时中只有一个“线程”，因此，如果正在发生某件事（例如，更改检测），则发生另一件事（例如，在间隔（ ）可见）不能在“相同时间”发生，它必须等待当前执行帧完成。