CODEWITHSUNDEEP
javascriptjquery
akano1
akano1

Reputation: 41684

how to execute a for loop with delay in javascript

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

Upvotes: 1

Views: 3623

Answers (5)

wong2
wong2

Reputation: 35760

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

Upvotes: 0

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

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

Upvotes: 0

skarmats
skarmats

Reputation: 1917

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])

Upvotes: 0

Dave Aaron Smith
Dave Aaron Smith

Reputation: 4567

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

Upvotes: 0

mattsven
mattsven

Reputation: 23303

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

Upvotes: 2

Related Questions