JavaScript setInterval 和 setTimeout 计时问题[重复]答案

【问题标题】：JavaScript setInterval and setTimeout timing issue [duplicate]JavaScript setInterval 和 setTimeout 计时问题[重复]
【发布时间】：2015-07-06 14:26:04
【问题描述】：

请查看以下 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，却返回 0, 接近 200 的数字

请查看fiddle.

这种行为的原因是什么？

【问题讨论】：

setInterval 不精确
之前已经回答过了。我相信setTimeout 和setInterval 的最小精度为 4~5 毫秒（因为它实际上说“在当前函数之后，大约在 n 毫秒内”），所以你不会得到它每毫秒运行一次。它已经在 SO 上展示过，但是在哪里...
除了不精确之外，它们只是保证最低限度。它们的真正意思是“在 x 毫秒后的某个时间 [重复] 运行此代码”
你不能保证他们会被定期调用，不。如果有人移动到另一个选项卡，浏览器可以并且会限制对setInterval 回调的调用。如果你需要根据时间流逝做事情，你需要使用Date对象或window.performance.now()，记录你的回调被最后一次调用的时间间隔。

标签： javascript settimeout setinterval timing

【解决方案1】：

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

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

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

setInterval 只保证在给定的时间段内有一个新的执行/调用after。不是在确切的时间。每个区间都可能存在差异。

【讨论】：

【解决方案2】：

setInterval 函数非常精确，正如您在 fiddle 上看到的那样。

问题在于您的代码，您正试图每毫秒执行一个函数。

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

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

setInterval 不是问题，JavaScript 是 : JS 尽可能执行函数，这就是为什么它稍后执行... 每个函数都关心这个问题，所以setInterval也...

Func(1) 耗时 70 毫秒：

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

setInterval 是精确的，但与 JS 中的每个函数存在相同的问题。

Image credits

【讨论】：

尝试在运行该小提琴后立即切换到另一个选项卡，然后再切换回来。 It is in no way precise.
是的，这是一个示例输出：30s 990ms, 32s 539m 1,5 秒差异！
setInterval 不是问题，JavaScript 是：它会尽可能执行函数，这就是它稍后执行的原因... 每个函数都关心这个问题，所以 setInterval 也是... setInterval 在 JavaScript 通常运行时可以很好地发挥作用^^ 这就是我的想法
在这种情况下，setInterval 是的问题。如果您使用的机器调用递增变量的函数需要超过 1 毫秒的时间......好吧，我会非常感到惊讶。
好吧，你会对此感到惊讶^^：image如果你想尝试：jsfiddle（多次单击“运行”并查看您的控制台）