每毫秒运行一个函数

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毫秒才能完成一秒钟。

演示

有人能告诉我，

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

Answer 1

代码中没有错误，但是JavaScript计时器(setInterval和setTimeout) 不精确。浏览器不能遵从如此短的间隔。因此，恐怕无法在web浏览器上精确地将毫秒递增并显示更新。在任何情况下，那都是肉眼看不见的！

精确的解决方法将涉及更大的间隔，以及计算以毫秒为单位的运行时间的时间戳：

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

Answer 2

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

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

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

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

更新小提琴

Answer 3

您不能使用您的方法这样做，因为延迟呈现HTML并运行间隔。这样做将正确地显示时间在60英尺左右。

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;   
}

您可能还需要考虑使用请求动画框架，而不是像这样硬编码的setInterval。