javascript - 初学者 JavaScript - 重新启动我的 for 循环

Question

我有一个分 4 步运行的动画，当 4 步结束时，我希望它重新启动。

var aSteps = [
    {
        "x": "800",
        "y": "0"
    },
    {
        "x": "800",
        "y": "500"
    },
    {
        "x": "0",
        "y": "500"
    }, {
        "x": "0",
        "y": "0"
    }
];

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) 
{
    $('#P1').animate
    ({
        left: aSteps[i].x,
        top: aSteps[i].y,
     }, 1000);
}

我试图添加一个 if 语句，如。

if (i == 3)
{
    i=0;    
}

但是我的浏览器会崩溃，因为它会无限运行 for 循环。我希望你能帮助我，教我我做错了什么。

Answer 1

.animate()可以接受一个回调，该回调将在动画结束时调用：

function animateSteps( counter ) {
    $('#P1').animate({
        left: aSteps[ counter ].x,
        top: aSteps[ counter ].y,
     }, 1000, function(){
         if (counter == 3)
         {
            counter=0;    
         }
         animateSteps( counter + 1 );
     });
}

animateSteps( 0 );

Answer 2

将 for 循环设置为一个函数。调用该函数，然后再次调用它。编辑：像这样：

function forloop() { 
   for (var i = 0; i < iStepsLength; i++) {
     $('#P1').animate ({ left: aSteps[i].x, top: aSteps[i].y, }, 1000); 
   }
}

那么您可以在希望循环运行时调用该函数，如下所示：

循环（）