stopping a for loop- jquery

Question

I was looking at this question but I can't get it to apply to my problem.

Here's what I want to do:

loop through a set of html tables using a button to start
pause the animation using another pause button
resume the animation where it left off

this is something similar to what I'm working on: fiddle My current version is too cumbersome to make an updated fiddle, but the concept is the same. I'll just be changing the content of the table like the right-most slider does.

Here's the code:

$('#Animate1').click(function(e){  //controls the tabR animation (top small table)
    for(i = 1; i < 37; i++){  //number of frames in the animation
        (function(i){   
            setTimeout(function(){  
                $('#amount1').val(i);  //this changes the number corresponding to the slider position 
                updateTable2(i);  //this updates the contents of the html table   
                updateHighlightedCell();  //this controls the "highlighted cells"
                $('#hSlider').slider({  animate:true,value: i});}, 1000 );  //this animates the slider
        }(i));  
    }   
});

I'm also having trouble with the delay. I was trying to work the delay into the loop, but it seems it's just the starting delay. I'd like to be able to control the frame rate a bit.
Many of the examples I've seen stop infinite loops, but mine is finite. How can I stop this loop and start it again? My ultimate loop will have 365 "frames" in it so it won't be quite as fast.

Any help would be appreciated. Thanks!

You should use the callback function of each animation to start the next one, rather than scheduling them all at once. — Barmar
– Barmar, Commented May 9, 2014 at 20:32
To stop the loop, have the click handler of the Stop button set a global variable. Then have the code in your animation callback functions check the variable. — Barmar
– Barmar, Commented May 9, 2014 at 20:33
I think I understand what you mean. I can figure out how to set a global variable, but not sure how this callback function would work in the context of my original function. — Crimpy
– Crimpy, Commented May 9, 2014 at 20:45
The for loop has already finished when you decide to stop it. — user400654
– user400654, Commented May 9, 2014 at 21:00
Yes, in the fiddle it does end quickly. It's just an example. In my working code it's a much longer loop with many more tables. I put this example up to show my approach. — Crimpy
– Crimpy, Commented May 9, 2014 at 21:04

Sunny Patel · Accepted Answer · 2014-05-09 21:15:57Z

1

I made a simple version in a JSFiddle of what you may be interested in, and hopefully extract the components that will be helpful to you. Also threw in a ton of comments to help understand the pieces.

The basic idea behind my method is having the setInterval() act as your for loop, and once per loop it will check to see if clearInterval() has been called on it. You will have a global counter to keep track of the position.

answered May 9, 2014 at 21:15

Sunny Patel

8,0972 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crimpy Over a year ago

Thanks for the comments. This helps me learn what the code means much faster! It's working with my code just fine. Thanks again!

Collectives™ on Stack Overflow

stopping a for loop- jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related