Question

我尝试创建一个倒数计时器，一旦计时器在Angular 4中达到1分钟（59秒或更短）以下，就会显示精确的毫秒数，但是我遇到了麻烦setInterval函数。这是代码：

JavaScript的：

#include <iostream>
#include <string>
#include <sstream>

int main(int argc, char **argv)
{
    std::string str;
    std::stringstream ss;

    while (std::getline(std::cin, str)) {
        ss << str << "\n";
    }

    std::cout << ss.str();
}

HTML：

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) + '.';
}

我遇到了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/另外为了更准确，你可能需要每次计算新的Date（）。getTime（），所以即使你的setInterval未能按时调用下一个函数，你仍然有正确的时间（至少）。如果您有任何其他问题，请告诉我，我准备在评论中回答。

Javascript倒计时器，带角度4的毫秒数

1 个答案: