JavaScript setInterval 和 setTimeout 计时问题

Question

请看下面的JavaScript代码：

var cis_current_time = 0;

setInterval(function() {
    cis_current_time += 1;
},1);

$("#timingInfo").html(cis_current_time);
setTimeout(function() {
    $("#timingInfo").html($("#timingInfo").html() + ', ' + cis_current_time);
},1000);

结果我除了得到0, 1000，但是它returns 0, number near 200

请勾选一个fiddle.

这种行为的原因是什么？

Answer 1

setInterval 函数非常精确，正如你在这个 fiddle.

上看到的

问题出在你的代码中，你试图每毫秒执行一个函数。

setInterval(function() {
    cis_current_time += 1;
},1);

JavaScript 是单线程的，然后，当它有很多指令时，它会将它们堆叠起来并在可能时调用它们，所以，这就是为什么它在你的情况下不精确。

setInterval 不是问题，JavaScript 是：JS在可以执行函数的时候执行函数，这就是它被执行的原因later... 每个函数都关注这个问题，所以setInterval也...

Func(1) 耗时 70 毫秒：

如果 Func(1) 需要 130 毫秒：

setInterval是精确的，但是和JS中的每个函数都有同样的问题。

Image credits

Answer 2

setInterval 和 setTimeout 由于其设计原因可能不准确。

它们由浏览器引擎执行，这意味着浏览器在某些情况下可以限制它们。举个例子，如果你的浏览器只为 JavaScript 使用一个进程，它们可能会被限制或者可能比你定义的更多的滴答，由于你使用的核心的当前压力。

可以通过使用多线程 JavaScript 稍微改进一下，但无论如何 - 它们不会 100% 准确。

setInterval 仅保证新的 execution/call after 给定时间段。不是在确切的时间。每个间隔可能完全不同。

JavaScript setInterval 和 setTimeout 计时问题

JavaScript setInterval and setTimeout timing issue

javascript

timing

settimeout

setinterval