Question

我正在使用Javascript / jQuery开发秒表应用程序。问题是毫秒值与REAL毫秒不同步。我使用的函数setInterval()的间隔为1 millisecond，但仍然会导致此问题。

jsFiddle：http://jsfiddle.net/FLv3s/

请帮忙！

Answer 1

使用setInterval触发更新，但使用系统时间（通过new Date()）进行实际时间计算。

Answer 2

老实说，我尝试的几乎和你现在做的差不多（只用Javascript创建一个准确的节拍器） - 长话短说：在毫秒（或更低）方面绝对准确是遗憾的不是（但是只能使用javascript。

如需更多见解，我建议您提出以下问题：Does JavaScript provide a high resolution timer?

或更准确地说这篇博客文章：http://ejohn.org/blog/how-javascript-timers-work/

祝你好运，多米尼克

Answer 3

使用任何语言（而不仅仅是JavaScript）执行程序都不是实时的。实际运行代码以增加计数器并更新视图需要花费很少的时间，并且会关闭“时间”。

此外，许多浏览器都有一个“最小超时”长度，在4到16之间变化（后者是计算机自己的时钟计时器），这将真正搞乱你的代码。

相反，您应该使用 delta timing 。

var startTime = new Date().getTime();
setInterval(function() {
    var elapsed = new Date().getTime()-startTime;
    // update view according to elapsed time
},25);

如果您担心它看起来不稳定，请考虑使用requestAnimationFrame代替，每帧更新一次计时器 - 这有一个额外好处，即当用户切换标签时不更新（但它仍然是对它们进行计时）因为如果选项卡不活动，则无需重绘东西。

Answer 4

您可以使用新的performance对象来获得更准确的时间。将其与requestAnimationFrame而不是setInterval：

结合使用

var startTime = performance.now(),
    currentTime,
    isRunning = true;

loop();

function loop(timeElapsed) {

    currentTime = performance.now();
    if (isRunning) requestAnimationFrame(loop);
}

只需从startTime中减去currentTime。

我离开timeElapsed，其中包含rAF所用的时间，您也可以将其用于某些事情（或者只是忽略它）。

但需要注意的是：并非所有浏览器都支持此功能（有些可能会使用前缀），因此对于移动设备，您需要使用标准的系统时间对象。

毫秒不同步

4 个答案: