Javascript 在chrome上使用requestAnimationFrame每100毫秒调用一个函数

我想每100毫秒执行一次函数。可以使用如下间隔完成：

setInterval(function(){ 
console.log('done')

}, 100);

但在chrome上，这需要2.5%到3%的CPU使用率

现在我想用

requestAnimationFrame

做同样的事情来测试CPU使用情况并比较性能

如何在chrome上使用requestAnimationFrame每100毫秒调用一次函数或控制台日志

---

这里有同样的堆栈问题，但我无法编写有效的代码：

您看到的成本主要不是

setInterval

的内部结构，而是调用回调的工作和回调所做的工作。使用

requestAnimationFrame

，情况不会好转更多情况更可能恶化

以下是您的做法，但我怀疑您会发现您最好做您正在做的事情或不做其中任何一项：

var last = Date.now();
requestAnimationFrame(function tick() {
    if (Date.now() - last >= 92) { // Why 92 instead of 100? See ¹ below.
        doYourWorkHere();

        last = Date.now();
    }
    requestAnimationFrame(tick);
});

请注意，您的函数现在所做的工作至少稍微多了一点，并且被调用的次数也更多了（每~17ms而不是每~100ms一次）

So：您最好还是坚持使用

setInterval

。如果每100毫秒所做工作的CPU负载过高，则需要取消间隔

---

为什么是92而不是100？因为每次回调距离最后一次调用约17毫秒，所以如果您在距离最后一次调用约95毫秒后不进行处理，那么您将在距离最后一次调用约112毫秒后的17毫秒后才有机会进行处理。92是100-（17/2）四舍五入，所以在91时，你会等到108，但在92时，你会马上去。这有助于您每100毫秒保持接近。实例：

var计数器=0；
var last=Date.now（）；
requestAnimationFrame（函数tick（）{
让差异；
如果（（diff=Date.now（）-last）>=92）{
log（`Time-since-last:${diff}ms`）；
last=日期。现在（）；
++计数器；
}
if（counter<20）{//只是为了防止示例永远运行
requestAnimationFrame（勾号）；
}
});
。作为控制台包装器{
最大高度：100%！重要；
}
是什么让你认为皇家空军会更好？但我无法编写一个有效的代码。好的，那么代码在哪里？基本上，这看起来像是你链接的问题的重复。如果这不起作用，那么你需要弄清楚原因。