javascript - HTML5 Canvas 的上限与SetInterval帧率不一样？

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

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

从传统的视频游戏的角度来看，限制游戏的帧速率是不明智的做法（当游戏（通常是较差的控制台端口）这样做时，确实很烦人）。我想知道这对于HTML5画布游戏是否必要。不受限制的帧率会真的造成诸如锁定浏览器或耗尽计算机的所有资源之类的不良后果吗？

我正在考虑这样的代码：

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

有一个更好的方法吗？

最佳答案

签出window.requestAnimationFrame（RAF）。

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

RAF会尽力为您提供有上限和无上限的计时器。

RAF创建了一个动画循环，可以与显示刷新很好地同步。
RAF异步等待，因此在等待下一帧时不会阻塞您的UI线程。
RAF将自动尝试以约60fps的速度循环播放。
最新的RAF为您提供了一个经过的计时器，您可以使用该计时器（1）如果您需要更少的fps则跳过此循环（2）如果跳过了最后一帧（例如由于系统垃圾收集），则可以捕获动画。

关于javascript - HTML5 Canvas 的上限与SetInterval帧率不一样？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22124049/

rAF

javascript - HTML5 Canvas 的上限与SetInterval帧率不一样？