想要控制动画的 FPS 是否是继续使用 setTimeout 而不是 requestAnimationFrame 的好理由？答案

【问题标题】：Is wanting to control the FPS of my animation a good reason to continue using setTimeout in stead of requestAnimationFrame?想要控制动画的 FPS 是否是继续使用 setTimeout 而不是 requestAnimationFrame 的好理由？
【发布时间】：2011-11-19 16:50:34
【问题描述】：

我想知道是否应该将我的游戏切换到 requestAnimationFrame。如果还有理由再这样做，正如我所读到的，当您在主要浏览器中切换标签时，setTimeout() 现在也会暂停。

无论如何，假设我想控制动画的 FPS。

目前我可以这样做：

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000 / k.settings.engine.fps );

k.settings.engine.fps 是所需的 fps。

如果我以requestAnimationFrame 的方式进行操作，我将失去这种可能性，它只会给我它所能给的一切：

window.requestAnimFrame(k.operations.startLoop);
renderLoop();

我看到有人建议将 requestAnimFrame 放在另一个循环中：

setInterval( function () {
    requestAnimationFrame( draw );
}, 1000 / 60 );

那么...我应该选择什么？保持原样？

requestAnimationFrame 的确切好处是什么，既然 setTimeout 在切换选项卡时也会暂停？

【问题讨论】：

标签： javascript html settimeout requestanimationframe

【解决方案1】：

requestAnimationFrame 是制作动画的正确方式。

为什么？

因为浏览器可以优化渲染以制作更流畅的动画。回答问题，另一种方式是：

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(callback, element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

下面的链接中还有另一种方式。

当您调用 requestAnimation 时，您可以让浏览器了解何时重绘 html。如果您在 CSS 中制作动画/过渡并移动内容或更改背景（作为精灵），则在调用 requestAnimation 时使用 requestAnimation 将使渲染正常工作。没有它，浏览器将在什么时间渲染任何内容，什么可以进行更多重绘。

即使是浏览器的运行方式，它也会进行比我们还不知道的更多的优化。让浏览器了解我们在做什么，然后它们会帮助我们。

我找到this link，可以补充一些想法

【讨论】：