Angular 4中带有毫秒的Javascript倒数计时器

Question

我正在尝试创建一个倒计时计时器，一旦计时器在 Angular 4 中达到低于 1 分钟（59 秒或更短）的时间用于体育赛事时钟，它将显示精确的毫秒数，但我遇到了 setInterval 函数的问题。代码如下：

JavaScript：

timer: number = 100;
intervalId: number = -1;

start() {
  this.intervalId = setInterval(() => {
    this.timeIt()
  }, 1000);   

  if (this.timer <= 0) {
    this.stop();
  }

}

stop() {
   clearInterval(this.intervalId);
   this.intervalId = -1;
}

startStop() {
  if(this.intervalId == -1) {
    this.start();
  }  else {
    this.stop();
  }
}

timeIt() {
 this.timer--;
 if (this.timer == 0) {
   clearInterval(this.intervalId);
 }
}

convertSeconds(s) {
  var minutes = Math.floor(s / 60);
  var seconds = (s % 60)
  var milliseconds = s;

  if (this.timer >= 60)
    return p5.prototype.nf(minutes, 1) + ':' + p5.prototype.nf(seconds, 2);
  else if (this.timer < 10)
    return p5.prototype.nf(seconds, 1) + '.';
  else 
    return p5.prototype.nf(seconds, 2) + '.';
}

HTML：

<h1>{{ convertSeconds(timer) }}</h1>
<button (click)="startStop()">Start/Stop</button>

我在使用 setInterval 函数时遇到问题，我知道如果我使用的参数是 1000，我无法计算毫秒数，但是当我尝试使用 1 或 10 作为参数时，代码会出现问题。正如您在 HTML 代码中看到的那样，我正在调用 convertSeconds() 函数，该函数在页面上呈现时间。卡在这个问题上一段时间了，求大神帮忙！

Answer 1

为了帮助您理解为什么您的代码会出现错误，我建议阅读下一篇文章：http://voidcanvas.com/setimmediate-vs-nexttick-vs-settimeout/ 使用 setInterval 显示精确的毫秒（就像体育赛事时钟一样）实际上是不可能的。您的间隔函数之间可能有不同的时间，因为它们将在下一个滴答声中设置，并且滴答声的数量将取决于系统性能以及是否存在 UI 阻塞操作。在这里想想 60 fps。如果我们将 1000 毫秒除以 60 帧，则每帧将花费 16 毫秒。这意味着您需要设法在此时间范围内完成重排和重绘，以使一切顺利进行。您可以在此处阅读它们：http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ 此外，为了更准确，您可能需要每次计算 new Date().getTime() ，因此即使您的 setInterval 未能按时调用下一个函数，您仍然有正确的时间（在至少）。如果您有任何其他问题，请告诉我，我准备在 cmets 中回答。