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

【问题标题】：Call a function each 100 milliseconds using requestAnimationFrame on chrome在 chrome 上使用 requestAnimationFrame 每 100 毫秒调用一个函数
【发布时间】：2019-08-02 00:06:46
【问题描述】：

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

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

}, 100);

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

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

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

这是相同的堆栈问题，但我无法制作工作代码：Call a function each x second in requestAnimationFrame

【问题讨论】：

是什么让您认为 rAF 会更好？
但我无法制作工作代码..好的，那么这段代码在哪里？基本上，这似乎与您链接的问题重复。如果这不起作用，那么您需要弄清楚原因。

标签： javascript requestanimationframe

【解决方案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);
});

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

所以：你最好还是坚持setInterval。如果每 100 毫秒完成的工作的 CPU 负载过高，则需要回退间隔。

¹ 为什么是 92 而不是 100？因为每个回调大约在最后一次之后约 17 毫秒，所以如果您在自上次调用后已经 [比如说] 95 毫秒时不进行处理，那么您将没有机会直到 ~ 17 毫秒后，自最后一次通话。 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;
 }

【讨论】：