7

我试图每毫秒运行一个函数，为了实现这一点，我只是首选setIntervaljavascript中的概念。我的代码如下，

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

演示

谁能告诉我，

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

4

5 回答 5

9

您的代码中没有错误，但 JavaScript 计时器（setInterval和setTimeout）并不精确。浏览器无法遵守如此短的间隔。所以恐怕没有办法在网络浏览器上精确地增加毫秒并显示更新。无论如何，这甚至是人眼看不到的！

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

var start = new Date().getTime();
setInterval(function() {
    var now = new Date().getTime();
    xElement.innerHTML = (now - start) + 'ms elapsed';
}, 40);
于 2013-09-18T19:26:16.087 回答
5

你不能。浏览器使用的延迟最小。您不能每毫秒运行一个函数。

来自 Mozilla 的文档：

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

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

于 2013-09-18T19:28:15.963 回答
4

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

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

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

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

更新的小提琴

于 2013-09-18T19:28:37.870 回答
3

由于延迟渲染 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。

于 2013-09-18T19:28:16.647 回答
0

setInterval回调可能不会以毫秒精度发生，因为计时器运行的线程可能在时间到时甚至实际上都没有运行，或者浏览器限制事件，或者其他很多事情。

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

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

于 2013-09-18T19:28:07.290 回答