动画中的初始滞后

Question

I have written an animation to recreate elastic collisions between balls。我每移动一次球> 10ms。问题是，当我加载动画时，有一个初始滞后。不过，我在代码的开头没有做任何重复/密集的事情。即使当我将球数减少到5球时，问题仍然存在。我用于重复的方法是否有缺陷？

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

    setTimeout(moveBalls, 10); 
} 

这是主循环。也许这是罪魁祸首。是否有更可靠的方法来间隔运行该功能？任何帮助是极大的赞赏。

Answer 1

是的，有一个更好的方式来运行的功能 - 这是一个很大的HTML5游戏中使用：

Window.requestAnimationFrame() 

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

这是更快，整体使得更高的帧率，以及性能（因为setTimeout是不是很准确）。

Article here（MDN）。