Javascript jquery中的太阳系

我试图在jQuery中创建一个太阳能系统。我有5个在椭圆轨道上移动的行星图像。当一颗行星到达起点时，它应该重新开始。我没时间了，因为有5颗行星必须移动，浏览器将被阻止。我必须在一段时间后再次调用该函数（如8秒以生成循环）。行星在一段时间（几分钟）后移动缓慢。有更好的办法吗

$(window).load(function() {
    solar(10, 1, "#i1", getDim($("#i1")));
    solar(200, 1, "#i2", getDim($("#i2")));
    solar(400, 1, "#i3", getDim($("#i3")));
    solar(400, 0, "#i4", getDim($("#i4")));
    solar(200, 0, "#i5", getDim($("#i5")));
});

function solar(start, dir, id, dim) {
    var nr = 0;
    var i = start;
    while (nr != 2) {
        if (dir == 1) {
            i += step;
            if (Math.abs(i - 2*aa) < step) 
                dir = 1- dir;
        } else {
            i -= step;
            if (Math.abs(i) < step) 
                dir = 1- dir;
        }
        if (Math.abs(i - start) < step) {
            nr++;
        }
        p = getElipsePoint(p, dim);
        $(id).animate(
            {"left": p.x, "top": p.y}, 
            { duration:1 }
        );
    }   
    window.setTimeout(function() { solar(start, dir, id, dim) }, 8000);
 }

$（窗口）.load（函数（）{
太阳能（10,1，“#i1”，getDim（$（“#i1”））；
太阳能（200,1，“#i2”，getDim（$（“#i2”））；
太阳能（400,1，“#i3”，getDim（$（“#i3”））；
太阳能（400,0，“#i4”，getDim（$（“#i4”））；
太阳能（200,0，“#i5”，getDim（$（“#i5”））；
});
太阳能功能（启动、定向、id、变暗）{
var-nr=0；
var i=启动；
而（nr！=2）{
if（dir==1）{
i+=阶跃；
if（数学abs（i-2*aa）<步骤）
dir=1-dir；
}否则{
i-=阶跃；
if（数学abs（i）<步骤）
dir=1-dir；
}
if（数学abs（i-启动）<步骤）{
nr++；
}
p=GetElipsPoint（p，dim）；
$（id）。设置动画(
{“左”：p.x，“上”：p.y}，
{持续时间：1}
);
}   
setTimeout（函数（）{solar（start，dir，id，dim）}，8000）；
}

您可以使用回调来确定动画何时完成。大概是这样的：

$(id).animate(
            {"left": p.x, "top": p.y}, 
            { duration:1 }, function () { console.log("Begin animation again"); }
        );

---

小提示，您可以考虑在onload中使用setInterval，并避免在solar中使用基于setTimeout的调用。我是否可以建议您使用一个更专业的库来实现这一切，比如D3.js？Demo:d3.js正如alexandernsrt所建议的那样是一个很好的开始方式，它也会很有效。它已经运行了一段时间，我在jquery动画中添加了一个完整的函数，如下所示：complete:function（）{if is_final_step（）setTimeout..same function}；谢谢