javascript - 画布动画的 requestAnimFrame 或 setInterval？

Question

哪个最适合画布动画？requestAnimFrame 还是 setInterval ？

Answer 1

requestAnimationFrame保证您的动画在浏览器准备好绘制新帧时准确运行。如果您使用setInterval，您将面临以下风险：

• 使间隔太短，在这种情况下，您会耗尽电池寿命执行永远不会显示的过于频繁的绘制操作
• 使间隔过长，在这种情况下，您可以通过使用更短的间隔来获得更平滑的动画

requestAnimationFrame可以在页面不可见时节流以降低运行频率（这可以节省电池寿命），但一些实现setInterval也这样做（目前在 Firefox 和 Chrome 中）。

requestAnimationFrame从头开始构建，旨在将其用于动画；setInterval旨在执行任何需要定期操作的操作。如果您正在制作动画（尤其是画布动画），我建议您使用requestAnimationFrame，并回退到setInterval旧浏览器。

Answer 2

但是您可以在大函数调用中使用 setInterval ，即 load 并且仅在加载窗口时调用它：

function load()
{
   var intervalle = x;
   var game= setInterval(process,intervalle);
   ...

}
window.addEventListener("load",load,true);