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

Question

我想每 100 毫秒执行一个函数。可以使用这样的间隔来完成：

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

}, 100);

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

现在我想用 requestAnimationFrame 做同样的事情来测试 CPU 的使用情况并比较性能。

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

这是同样的堆栈问题，但我无法编写工作代码：

Answer 1

您看到的成本主要不是 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);
});

请注意，您的函数现在至少做了更多的工作，并且被调用的频率多了（每 ~17 毫秒而不是每 ~100 毫秒）。

所以：你最好坚持使用setInterval。如果每 100 毫秒完成的工作 CPU 负载过高，您需要取消间隔。

¹ 为什么是 92 而不是 100？因为每个回调都在上次回调之后大约 17 毫秒，所以如果你在自上次调用以来 [say] 95 毫秒后不进行处理，你将不会有机会直到 ~17 毫秒后，即自上次调用以来约 112 毫秒最后一次通话。 92 是 100 - (17 / 2) 四舍五入，所以在 91 时你会等到 108，但在 92 时你会马上离开。这有助于您保持接近每 100 毫秒。现场示例：

var counter = 0;
var last = Date.now();
requestAnimationFrame(function tick() {
    let diff;
    if ((diff = Date.now() - last) >= 92) {
        console.log(`Time since last: ${diff}ms`);

        last = Date.now();
        ++counter;
    }
    if (counter < 20) { // Just to keep the example from running forever
      requestAnimationFrame(tick);
    }
});

.as-console-wrapper {
    max-height: 100% !important;
 }

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

Call a function each 100 milliseconds using requestAnimationFrame on chrome

javascript

requestanimationframe