动画中的初始延迟

Question

I have written an animation to recreate elastic collisions between balls。我每隔10分钟移动一次球。问题是，当我加载动画时，存在初始延迟。但是，在代码开头，我没有做任何重复/密集的事情。即使我将球数减少到5球之类，问题仍然存在。我用来重复的方法有缺陷吗？

function moveBalls() {
    for(j = 0; j < ball_count; j++) {
        balls[j].move();
    }

    setTimeout(moveBalls, 10);
}

这是主循环。也许这就是罪魁祸首。是否有更可靠的方式以一定间隔运行该功能？非常感谢任何帮助。

Answer 1

是的，有更好的方法来运行该功能 - 这是很多HTML5游戏使用的：

Window.requestAnimationFrame()

这告诉浏览器你正在做动画并希望尽快再次运行该功能。它将在下次绘制屏幕时运行它。

速度越快，整体速度越高，性能越高（setTimeout不太准确）。

第here条（MDN）。