javascript - 毫秒不同步

Question

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

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

请帮忙！

Answer 1

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

Answer 2

老实说，我尝试了几乎与您现在所做的相同的事情（仅在 Javascript 中创建准确的节拍器） - 长话短说：遗憾的是，以毫秒（或更低）为单位绝对准确是不可能的仅使用 javascript。

为了获得更多见解，我推荐这个问题：JavaScript 是否提供高分辨率计时器？

或者更准确地说，这篇博客文章：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 所经过的时间，您也可以将其用于某些事情（或忽略它）。

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