how to execute a for loop with delay in javascript

Question

Hi I was just wondering how I can execute a for loop with delays

var currentPosition2 = 1;
    for(i=0;i<numberOfSlides;i++) {
        //alert(currentPosition2);
        currentPosition2 = currentPosition2 + 1;
        jQuery('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition2)
        });             
    }

at the moment all 3 slides animate at one time, I'd like to make a delay of 3 seconds between each loop and 3 seconds before the loop starts,

any help would be appreciated,

thanks

mattsven · Accepted Answer · 2011-03-30 13:31:29Z

1

Check out jQuery's .delay(), I think it does what you want. Otherwise setTimeout may be the way to go.

answered Mar 30, 2011 at 13:31

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

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

6 Comments

akano1 Over a year ago

thanks for the reply but I need to stop the timer when some one is trying to change the slides manually

akano1 Over a year ago

yes, setTimeout is what I need but I just dont seem to be able to fit it in the for loop, any help would be appreciated

user447356 Over a year ago

@amir what you mean "change the slides manually"? Is there any JS cod running in such a case?

akano1 Over a year ago

this is a slide show I didnt provide the rest of the code, cos it's too long, basically when page loads I want the slides to change automatically and if someone clicks on the arrows(left/right) to change the slides manually the timer stops and slides would change

hobbs Over a year ago

@amir you want .delay anyway. And you can use .stop to cancel pending animations if the user input changes.

|

wong2 · Accepted Answer · 2011-03-30 14:16:26Z

0

works for me:

var numberOfSlides = 5;
function animateSlides(currentPosition2){
    if(currentPosition2 < numberOfSlides){
        alert(currentPosition2);
        currentPosition2 = currentPosition2 + 1;
        var foo = (function(pos){
            return function(){
                animateSlides(pos);
            };
        })(currentPosition2);
        setTimeout(foo, 3000);
    }
}

animateSlides(1);

edited Mar 30, 2011 at 14:16

answered Mar 30, 2011 at 13:41

wong2

36.1k51 gold badges138 silver badges182 bronze badges

Comments

Dave Aaron Smith · Accepted Answer · 2011-03-30 13:37:32Z

0

I'd turn the for loop into a recursive function with a delay. I'm not sure exactly what you're doing with currentPosition2 so this may have an off-by-one error.

var currentPosition2 = 1;

function animateSlide() {
  // Set manualClickHappened to true if the user clicks a slide
  if (manualClickHappened) {
    return;
  }
  currentPosition2++;
  jQuery('#slideInner').animate({
    'marginLeft': slideWidth * (-currentPosition2)
  });
  if (currentPosition2 < numberOfSlides + 2) // Possible off-by-one
    window.setTimeout(animateSlide, 3 * 1000);
  }
}

window.setTimeout(animateSlide, 3 * 1000);

answered Mar 30, 2011 at 13:37

Dave Aaron Smith

4,56735 silver badges37 bronze badges

1 Comment

akano1 Over a year ago

thanks for the reply, currentPosition is the currentPosition of the slide and it increases as the slides animate to the next one.

skarmats · Accepted Answer · 2011-03-30 13:48:31Z

0

Maybe, roughly something like this. Should clean up cleared intervals from the runningIntervals better though.

var currentPosition2 = 1;
var runningTimeouts = {};

var secondsBetween;

    for(i=0;i<numberOfSlides;i++) {
        //alert(currentPosition2);
        var j = i;  // use j, if you need i inside the closure (otherwise it wouldn't work)
        var id = setTimeout(function () {
            currentPosition2 = currentPosition2 + 1;
            jQuery('#slideInner').animate({
                'marginLeft' : slideWidth*(-currentPosition2)
            });                   
        }, (i+1)*secondsBetween);   
        runningTimeouts[i] = id;
    }
// then use runningTimeouts to kill timeouts prematurely
// clearTimeout(runningTimeouts[someKey])

edited Mar 30, 2011 at 13:48

answered Mar 30, 2011 at 13:42

skarmats

1,91715 silver badges18 bronze badges

Comments

user447356 · Accepted Answer · 2011-03-30 13:49:45Z

Using your existing code, what you need is:

var arrTimers = [];
for(var i = 0; i < numberOfSlides; i++) {
    //alert(currentPosition2);
    currentPosition2++;
    arrTimers.push(window.setTimeout(function() {
        jQuery('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition2)
        });
    }, i * 1000));
}

This will cause the first animation to occur instantly, the second to occur after 1 second, third after 2 seconds etc.

To stop specific timer use such code:

window.clearTimeout(arrTimers[2]);

This for example will prevent the third animation from happening.

To clear all timers:

$.each(arrTimers, function(index, value) {
   window.clearTimeout(value);
});

Collectives™ on Stack Overflow

how to execute a for loop with delay in javascript

5 Answers 5

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related