Applying delay between iterations of javascript for loop

Question

Is it possible to apply a delay to successive iterations of a javascript for-loop using jQuery or underscore? I have a for-loop on my page that I am using to pop up growl notifications when users fulfill certain conditions and if there are multiple conditions I would like to stagger the growl notifications instead of popping up several at the same time. Here is the loop in question:

var badge_arr = response.split("Earned badge:");
//Start at 1 so I'm not getting everything before the first badge
for(i = 1; i < badge_arr.length; i++){
    responseStr += badge_arr[i];
    //Create growl notification
    //badge info echoed back will be of the form 
    //Earned badge: name: description: imgSource
    var badge_info = badge_arr[i].split(':');
    var title = 'NEW BADGE UNLOCKED';
    var text = 'You just unlocked the badge '+badge_info[0]+': '+badge_info[1];
    var img = badge_info[2];
    createGrowl(title, text, img);
}

Well dang, I was just about to accept the other answer before it was deleted. — jaimerump
– jaimerump, Commented Aug 1, 2012 at 18:11
@Xander The first element executed immediately for me, and then the rest executed at the same time. I saw that it worked in your JSfiddle correctly though. I have no idea what is up with that. But then again he had to change the parameters of the question, and your solution clearly works, at least for alerts. I'll just assume that I made a mistake implementing it, misplaced braces or something. — jaimerump
– jaimerump, Commented Aug 1, 2012 at 18:59
Possible duplicate of How do I add a delay in a JavaScript loop? — melpomene
– melpomene, Commented Dec 26, 2018 at 13:54

Alex · Accepted Answer · 2021-02-03 19:37:44Z

33

for(i = 1; i < badge_arr.length; i++){
    (function(i){
        setTimeout(function(){
            responseStr += badge_arr[i];
            //Create growl notification
            //badge info echoed back will be of the form 
            //Earned badge: name: description: imgSource
            var badge_info = badge_arr[i].split(':');
            var title = 'NEW BADGE UNLOCKED';
            var text = 'You just unlocked the badge '+badge_info[0] +
                       ': '+badge_info[1];
            var img = badge_info[2];
            createGrowl(title, text, img);
        }, 1000 * i);
    }(i));
}

Illustration:

for(i = 1; i <= 8; i++){
    (function(i){
        setTimeout(function(){
            document.body.innerHTML += i + "<br/>"
        }, 1000 * i);
    }(i));
}

edited Feb 3, 2021 at 19:37

answered Aug 1, 2012 at 17:50

Alex

35.5k5 gold badges81 silver badges94 bronze badges

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

5 Comments

ClarkeyBoy Over a year ago

damn was about to point out your error with the lack of * i - you edited it before I could... +1 just for that!

Tim Over a year ago

Can you explain why the * i matters?

Alex Over a year ago

@tim if you run the example it'll become a-little more evident. the outer loop increments i badge_arr.length times. thus passing into the inner closure 0, 1, 2, etc ... making the setTimeout execute every second (1000 milliseconds).

webketje Over a year ago

@Xander, I found this when looking for 'delay in for loop javascript' on google. This function saved me a lot of worries, thanks a lot!

Gaurav Ojha Over a year ago

Why can't we have something like sleep?

Andrei · Accepted Answer · 2020-04-04 10:40:06Z

4

I prefer to use self-invoking function that receives a number of iterations:

(function loop(i) {          
   setTimeout(function () {   

      console.log('hello world'); // your code

      if (--i) loop(i); // iteration counter
   }, 5000) // delay
})(10); // iterations count

edited Apr 4, 2020 at 10:40

answered Jan 29, 2016 at 23:43

Andrei

44.9k39 gold badges163 silver badges228 bronze badges

Collectives™ on Stack Overflow

Applying delay between iterations of javascript for loop

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related