Newbie in JavaScript - reinitiating my for loop journey

Question

Newbie in JavaScript - reinitiating my for loop journey

After running an animation in 4 steps, I want it to restart once all the steps are completed.

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

I attempted to use an if statement to reset the count back to 0 after reaching the last step.

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

However, this caused the browser to crash as it entered an infinite loop. I'm seeking guidance on how to rectify this issue.

javascript for-loop

Answer 1

Answer №1

.animate() has the ability to include a callback function that gets executed after the animation is complete:

function moveElements( index ) {
    $('#container').animate({
        left: elements[ index ].x,
        top: elements[ index ].y,
     }, 800, function(){
         if (index == 4)
         {
            index = 0;    
         }
         moveElements( index + 1 );
     });
}

moveElements( 0 );

Answer 2

.animate() has the ability to include a callback function that gets executed after the animation is complete:

function moveElements( index ) {
    $('#container').animate({
        left: elements[ index ].x,
        top: elements[ index ].y,
     }, 800, function(){
         if (index == 4)
         {
            index = 0;    
         }
         moveElements( index + 1 );
     });
}

moveElements( 0 );

Answer 3

Answer №2

Transform the for loop into a standalone function and execute it twice consecutively. UPDATE: Here's an example:

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

You can then simply invoke the function whenever you need to initiate the loop like this:

runForLoop()

Answer 4

Transform the for loop into a standalone function and execute it twice consecutively. UPDATE: Here's an example:

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

You can then simply invoke the function whenever you need to initiate the loop like this:

runForLoop()

Newbie in JavaScript - reinitiating my for loop journey

Answer №1

Answer №2

Similar questions

Is it possible to exclude specific URLs from CSRF protection in sails.js?

Tips for managing onClick events within a conditional component

Loading message displayed in web browsers by banner rotation system

Using the window.setInterval() method to add jQuery/AJAX scripts to elements at regular intervals of 60 seconds

Floating action button within a collapsible panel

Creating a multi-dimensional array in order to store multiple sets of data

When I attempt to utilize the API, the JavaScript implementation of a <script src=...> element seems to interfere

Locate the database user based on any parameter provided in the request

The headers set in jQuery's $.ajaxSetup will be used for every ajaxRequest, even if they

Hierarchy-based state forwarding within React components

What is the best way to bind data to a textarea component and keep it updated?

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

"Enjoy a unique browsing experience with a two-panel layout featuring a fixed right panel that appears after scrolling

Is it possible to change button behavior based on input values when hovering?

Node.js: Troubleshooting a forEach Function Error

Guide on extracting nested JSON data values using JavaScript

I am having trouble with the CSS and Bootstrap not being applied after printing

Authorization based on user roles in Node.js or Express.js

Having Trouble with Axios PUT Request in React and Redux

The result after calling JSON.parse(...) was not accurate