javascript - HTML5 Canvas 的 Uncapped 与 SetInterval 帧速率？

Question

查看 this HTML5 game tutorial它使用以下代码以每秒 30 帧的速度更新帧:

var FPS = 30;
setInterval(function() {
    update();
    draw();
}, 1000/FPS);

从传统视频游戏的 Angular 来看，限制游戏帧速率是一种不好的做法(当游戏(通常是糟糕的控制台端口)这样做时，这真的很烦人)。我想知道这对于 HTML5 Canvas 游戏是否是必要的。无限的帧速率会造成一些非常糟糕的事情，例如锁定浏览器或耗尽所有计算机资源吗？

我正在考虑这样的代码:

update();
function update()
{
    // Move stuff around
    draw();
}
function draw()
{
    // Draw the changes
    update();
}

有更好的方法吗？

Answer 1

查看 window.requestAnimationFrame (RAF)。

顾名思义，RAF 的创建就是为了出色地管理动画。

RAF 试图为您提供最好的有上限和无上限计时器。

• RAF 创建一个与显示刷新良好同步的动画循环。
• RAF 异步等待，因此您的 UI 线程在等待下一帧时不会被阻塞。
• RAF 将自动尝试以大约 60 fps 的速度循环播放。
• 最新的 RAF 为您提供了一个已用计时器，您可以使用它来 (1) 如果您需要较少的 fps，则跳过此循环 (2) 如果最后一帧被跳过(例如由于系统垃圾收集)，则可以 catch 动画。