Question

在JS中创建计时器的最佳方法是什么？

到目前为止我一直在使用它：

var sec = 0;
setInterval(function (){sec +=1}, 1000);

我注意到，当我需要毫秒时，它会减慢很多。在浏览器选项卡更改时，它会完全停止。

var milisec = 0;
setInterval(function (){milisec +=1}, 1);

我正在寻找一种更好的方法来处理这个问题，当浏览器窗口发生变化时，这种方式也会继续有效。

Answer 1

以毫秒为单位，定时器的分辨率不够大。在大多数情况下，即使将间隔设置为1毫秒，回调也不会被大约每秒调用50到250次。请参阅Timer resolution in browsers（由Sani Huttunen提及）以获得解释。

1000毫秒它会更好。但是当选项卡处于非活动状态时，计时器仍然会被触发，并且当cpu繁忙或者页面上正在运行其他脚本时可能会延迟。

一种解决方案是不增加计数器，而是测试自上一次调用计时器以来实际经过了多少时间。这样，即使间隔时间间隔延迟或暂停，时间仍然准确。

此片段将记住开始日期，并在每个计时器间隔更新秒和毫秒，以更新当前时间和开始时间之间的差异。

var start = new Date();
var milliseconds = 0;
var seconds = 0;
setInterval(function()
{
    var now = new Date();
    milliseconds = now.getTime() - start.getTime();
    seconds = round(milliseconds / 1000);
}, 1000);

我再次将间隔设置为1000。您可以将其设置得更短，但会花费更多的性能。

相关问题：How can I make setInterval also work when a tab is inactive in Chrome?

Answer 2

基于@ goleztrol的解决方案，我专门针对我的情况创建了一个替代解决方案（它可能不适用于所有人）。

我只是问这个函数需要的确切时间，知道确切的毫秒数：

var start = new Date();
var msPassed = function() {
    var now = new Date();
    var ms = now.getTime() - start.getTime();
    return ms
}

msPassed(); //returns time passed in ms

我需要定位对象（在创建时），这取决于创建之前经过的时间，因此对于我的情况，这是一个完美的解决方案。但是，我最初的问题要求完美的计时器，这不是它。无论如何，这是供将来参考。

简单的计时器和setinterval

2 个答案: