Question

我正在尝试每毫秒运行一个函数，为了达到这个目的，我只想在javascript中使用setInterval概念。我的代码如下，

HTML：

<div id=test>0.0</div>

脚本：

var xVal = 0;
var xElement = null;

xElement = document.getElementById("test");
var Interval = window.setInterval(startWatch, 1);


function startWatch(){

    xVal += 1;
    xElement.innerHTML = xVal;

}

所以上面的代码工作正常。但是当我使用真实时钟测试结果时，真正的时钟需要1000毫秒才能完成1秒，同时结果需要超过1000毫秒才能完成一秒钟。

DEMO

任何人都可以告诉我，

我的代码有什么错误吗？如果是，请告诉我，如何准确显示毫秒。

Answer 1

您的代码中没有错误，但JavaScript定时器（setInterval和setTimeout）are not precise。浏览器不能遵守如此短的间隔。所以我担心没有办法精确地将毫秒增加1，并在Web浏览器上显示更新。在任何情况下，人眼都看不到它！

精确的解决方法将涉及更大的时间间隔和时间戳来计算经过的时间（以毫秒为单位）：

var start = new Date().getTime();
setInterval(function() {
    var now = new Date().getTime();
    xElement.innerHTML = (now - start) + 'ms elapsed';
}, 40);

Answer 2

你做不到。浏览器使用的延迟时间最短。你不能每毫秒运行一次函数。

来自Mozilla的文档：

... 4ms由HTML5规范指定，并且在浏览器中保持一致......

_{来源：https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout#Minimum.2F_maximum_delay_and_timeout_nesting}

Answer 3

DOM实际上不能每秒更新1000次。您的显示器甚至无法在一秒钟内显示1000帧。计算函数中开始时间和当前时间之间的差异（以毫秒为单位），然后使用：

(function(){
    var xElement = document.getElementById("test");
    var start = new Date;

    (function update(){
      xElement.innerHTML = (new Date - start);

      setTimeout(update, 0);
    })();
}();

Updated fiddle

Answer 4

由于延迟渲染HTML并运行间隔，因此无法使用您的方法。这样做会在大约60FPS时正确显示时间。

http://jsfiddle.net/3hEs4/3/

var xElement = null;
var startTime = new Date();

xElement = document.getElementById("test");
var Interval = window.setInterval(startWatch, 17);


function startWatch(){
     var currentTime = new Date();
     xElement.innerHTML = currentTime - startTime;   
}

您可能还希望使用requestanimationframe而不是像这样的硬编码setInterval。

Answer 5

setInterval回调可能不会以毫秒精度发生，因为计时器运行的线程可能在时间到期时甚至实际上没有运行，或浏览器限制事件，或任何其他相当的很少的东西。

此外，由于大多数Javascript引擎都是单线程的，setInterval的实现可能会触发，运行回调，然后重置下一次调用的时钟。由于您正在进行一些DOM操作，因此可能需要几毫秒。

简而言之，除了很可能不是RTOS之外，你期望在另一个应用程序内运行的解释器实现实时操作系统行为。

每毫秒运行一次功能

5 个答案: