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

Beginner JavaScript - restarting my for loop

本文关键字:for 循环 我的 重新启动 JavaScript 初学者      更新时间:2023-09-26

我有一个分 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 循环。我希望你能帮助我,并教我我做错了什么。

.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 );

将 for 循环设置为等于函数。 调用该函数,然后再次调用它。编辑:喜欢这个:

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

然后,只要您希望循环像这样运行,您就可以调用该函数:

forloop()