Waiting in a Javascript loop [duplicate]

Question

I have a function set up like this

awesomeFirePenguin: function(){
   // function does some stuff, not important
},

and I call it in a for loop like this

for (var i = 0; i < n; i++){
   this.awesomeFirePenguin();           
}

This works, the function is called n times, but the results of the function are shown immediately after each other. What I want is for the results to be shown after each other with a slight delay, like 100ms or so. Something klike this

for (var i = 0; i < n; i++){
   this.awesomeFirePenguin(); 
   // wait a while and then continue    
}

I tried using

for (var i = 0; i < n; i++){
    window.setTimeout(this.awesomeFirePenguin(), 100);
}

and window.setInterval(this.awesomeFirePenguin(), 100);, but both only execute the function once.

The unique thing about my problem is the way I have my function set up and I can't change that. If I use the solutions in the other question, I end up with what I describe at the end of my question. — finrod
– finrod, Commented Jul 24, 2013 at 18:06

voithos · Accepted Answer · 2013-07-24 18:09:26Z

3

setTimeout and setInterval can take functions as arguments, but what you were doing is calling them. Thus, they were receiving not the function, but its return value as an argument.

If you want to delays to stack, you can just multiple the timeout delay by whatever loop index you're currently at.

for (var i = 0; i < n; i++){
    window.setTimeout(this.awesomeFirePenguin.bind(this), 100 * i);
}

edited Jul 24, 2013 at 18:09

answered Jul 24, 2013 at 18:04

voithos

70.9k12 gold badges107 silver badges120 bronze badges

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

2 Comments

Pointy Over a year ago

Might be necessary to wrap the function or use .bind() to preserve the context (this)

voithos Over a year ago

@finrod: No prob, and welcome to StackOverflow! If you haven't already, check out the quick tour.

Community · Accepted Answer · 2017-05-23 12:21:36Z

2

The answer by voithos is probably the simplest. You can also use an asynchronous execution library like Clumpy.js, where you could write your code as:

var clumpy = new Clumpy({delay: 100});
var i;
clumpy.for_loop(
    function() { i = 0; },
    function() { return i < n; },
    function() { ++i; },
    this.awesomeFirePenguin
);

It's also possible to do this using a closure and a self-invoking function, but it's ugly code that's hard to understand:

(function loop(i, f) {
   setTimeout(function () {
      f();
      if (--i) loop(i, f);
   }, 100)
}(n, this.awesomeFirePenguin));

It's possible to write something using setInterval instead of setTimeout, but it's not any easier to comprehend, although it probably eliminates the recursive calls.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 24, 2013 at 18:19

Ted Hopp

235k48 gold badges412 silver badges533 bronze badges

1 Comment

voithos Over a year ago

Nice, interesting usage of recursion.

Collectives™ on Stack Overflow

Waiting in a Javascript loop [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related