stopping a for loop- jquery

Question

previous 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!

Answer 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.