0

我一直在玩 HTML5 和 Canvas，所以我很高兴我正在做的事情有一个恒定的帧速率。为此，我正在尝试使用 javascript 的 setInterval，但似乎 setInterval 的循环速度比预期的要快。

出于测试目的，我编写了一个小测试脚本，如下：

var start = new Date();
var frames = 0;

setInterval(function() { 
    frames++;
    var d = new Date();
    if (d.getTime() - start.getTime() > 1000) {
        console.log(frames);
        frames = 0;
        start = d;
    }
}, 1000/60);

这个脚本应该打印一秒钟内计算了多少“帧”。如果 setInterval 工作正常，它会在控制台上不断打印“60”。然而，Chrome 和 Firefox 给我每秒 63 帧，而 Internet Explorer 9 给我每秒 66 到 67 帧（总是最糟糕的违规者）。

将 1000 毫秒提高到 20000 后，我在 Chrome 上的平均速度为 62.5 fps，在 Firefox 上为 62.4 fps，在 Internet Explorer 上为 66.0。

我在 Mozilla 上阅读了这篇非常有启发性的文章，关于 setTimeout，他们提到了“clamping”，我认为这可能是一个可能的原因。但是，对于 60fps，超时时间为 16.6 毫秒，高于使用的任何钳位。

我还认为这可能是一个计时器错误，让我关闭了一两帧，但是 20000 毫秒的测试返回了相同的平均 fps，所以它也不是计时器。

关于我做错了什么的任何想法？这是一种非常奇怪的行为。对于任何反馈，我们都表示感谢。

4

2 回答 2

1

setTimeout 的延迟是一个整数（毫秒）。1000/60是16.67，它被截断为16。1000/16是62.5。IE 的时钟以 15ms 的增量运行，因此它可能以 15ms 的间隔运行该函数，因此66.7fps.

所有这些都符合您观察到的行为。

最重要的是，您的 setTimeout 和 setInterval 的变幻莫测并没有完全按照请求的延迟运行，因此如果系统突然变得很忙（比如响应网络请求、滚动操作等），帧速率将变慢或变得不稳定尝试赶上。

于 2013-03-05T05:29:31.157 回答
0

不幸的是，这种方法不能产生一致的结果。您必须考虑相关脚本的实际执行时间，尽管它可能很短。

我听说 requestAnimationFrame 更适合这种用途。

来自 Mozilla 开发者网络的关于它的片段。

一篇关于它的好文章

于 2013-03-05T05:23:14.593 回答