動畫中的初始滯後

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