如何使用 requestAnimationFrame 锁定 FPS？

Question

我使用 Paul Irish https://gist.github.com/paulirish/1579671的脚本 在 html 站点内创建动画循环。

它可以工作，尽管它在全屏模式下比在浏览器窗口中更快。另外，我观察到不同的速度取决于画布大小和我使用的浏览器。

问：使用脚本如何保证稳定的帧率？

代码可在此处获取（《Beginning WebGL》，第 1 章，作者：Brian Danchilla）： https://github.com/bdanchilla/beginningwebgl/blob/master/01/2D_movement.html

Answer 1

像这样的东西应该有效。如果两帧之间的时间差小于 FPS 限制，则更新函数将返回并等待下一帧。但这只会限制更新发生得太快；就像 emackey 所说，更新循环总是有可能运行得更慢。

var updateId,
    previousDelta = 0,
    fpsLimit = 30;

function update(currentDelta) {
    updateId = requestAnimationFrame(update);

    var delta = currentDelta - previousDelta;

    if (fpsLimit && delta < 1000 / fpsLimit) {
        return;
    }

    /* your code here */

    previousDelta = currentDelta;
}