Question

我创建了一个简单的函数，它在3秒内将值从0计算到某个值。

这是小提琴 - https://jsfiddle.net/ar6akv5z/和片段：

var number = document.querySelector('.number');
var button = document.querySelector('button');

button.addEventListener('click', function() {
    counting(number, 2500);
})

function counting(elem, value) {
 var count = 0;
 var timerId = setInterval(function() {
  if (++count == value) clearInterval(timerId);
  elem.innerHTML = count;
 }, 3000/value);
}

<span class="number">0</span>
<button>Go</button>

但是功能的持续时间超过3秒。你能解释一下为什么会这样，或者告诉我我的错误。

谢谢，对不起我的英文

Answer 1

setTimeout和setInterval强制执行最小延迟。来自MDN

延迟的原因超过指定

嵌套超时强制为＆gt; = 4ms

历史上，浏览器实现setTimeout（）“clamp”：延迟小于“最小延迟”限制的连续setTimeout（）调用被强制使用至少最小延迟。最小延迟DOM_MIN_TIMEOUT_VALUE为4毫秒（存储在Firefox中的首选项：dom.min_timeout_value），DOM_CLAMP_TIMEOUT_NESTING_LEVEL为5。

实际上，HTML5规范指定了4毫秒，并且在2010年及之后发布的浏览器中保持一致。在（Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2）之前，嵌套超时的最小超时值为10毫秒。

因此，即使您将3000/2500 = 1.2指定为间隔时间，也会将4用作间隔时间。

Answer 2

计时器的最小间隔符合an algorithm指定的HTML5规范（最初是在现已不存在的计时器规范中），以防止计时器过快地触发。当计时器调度计时器（基本上是.obj所做的）时，一旦嵌套达到5，如果所请求的计时器间隔是＆lt; 4毫秒，它设置为4毫秒：

如果嵌套级别大于5，并且超时小于4，则将超时增加到4。

由于每次定时器点火时你都会告诉它计数加1，并且它很快就会开始每4ms（最多）点火，所以需要4 * 2500 = 10000ms（10秒）完成。

您可以在下方更新的代码段中看到此平均延迟，它会将回复替换为回调之间的平均时间：

＆＃13;

setInterval

＆＃13;

if (!Date.now) {
  Date.now = function() {
    return +new Date();
  };
}
var number = document.querySelector('.number');
var button = document.querySelector('button');
var sum = 0;
var last = null;

button.addEventListener('click', function() {
    counting(number, 2500);
})

function counting(elem, value) {
 var count = 0;
  last = Date.now();
 var timerId = setInterval(function() {
   var now = Date.now();
   sum += now - last;
   last = now;
  if (++count == value) clearInterval(timerId);
  elem.innerHTML = sum / count;
 }, 3000/value);
}

＆＃13;

setInterval的持续时间

2 个答案: