javascript - 动画的初始滞后

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)。