JavaScript variable binding and loop

Question

Consider such loop:

for(var it = 0; it < 2; it++)
{
    setTimeout(function() {
        alert(it);
    }, 1);
}

The output is:

=> 2
=> 2

I would like it to be: 0, 1. I see two ways to fix it:

Solution # 1.

This one based on the fact that we can pass data to setTimeout.

for(var it = 0; it < 2; it++)
{
    setTimeout(function(data) {
        alert(data);
    }, 1, it);
}

Solution # 2.

function foo(data)
{
    setTimeout(function() {
        alert(data);
    }, 1);
}

for(var it = 0; it < 2; it++)
{
    foo(it);
}

Are there any other alternatives?

Russ Cam · Accepted Answer · 2011-06-09 21:19:41Z

45

Not really anything more than the two ways that you have proposed, but here's another

for(var it = 0; it < 2; it++)
{
    (function() {
        var m = it;   
        setTimeout(function() {
            alert(m);
        }, 1);
    })(); 
}

Essentially, you need to capture the variable value in a closure. This method uses an immediately invoked anonymous function to capture the outer variable value it in a local variable m.

Here's a Working Demo to play with. add /edit to the URL to see the code

edited Jun 9, 2011 at 21:19

answered Nov 4, 2009 at 20:34

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

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

6 Comments

Alan Over a year ago

+1. However, You can slightly modify this by changing the method signature to: function(m) { /*code */ })(it);

digory doo Over a year ago

+1, but can anybody explain me why this is working?!

Russ Cam Over a year ago

@digorydoo The function declared in the loop is wrapped in parentheses followed by a set of parentheses which act to immediately invoke the function. Since variables are scoped to the function in which they are declared (or global scope if not declared within a function), the value of it in each iteration is assigned to the m variable that is scoped to the function that is executed immediately.

digory doo Over a year ago

I understand the syntax, but I'm confused why there should be a difference if the variable 'it' is copied into some other variable 'm' instead of just using 'it'.

Russ Cam Over a year ago

@digorydoo Because the value of it changes each iteration, if the value in each iteration is not captured in the context of the immediately executed function upon each iteration, then the value of it as it exists when the function passed to setTimeout is executed will be used. Assigning the value of it to m captures the value in each iteration in a closure, thereby alerting the expected value from each iteration when the function passed to setTimeout executes. Does that help?

|

tbondwilkinson · Accepted Answer · 2015-12-04 17:48:44Z

21

With the let keyword you can get around this completely:

for(let it = 0; it < 2; it++)
{
    setTimeout(function() {
        alert(it);
    }, 1);
}

answered Dec 4, 2015 at 17:48

tbondwilkinson

1,0872 gold badges8 silver badges16 bronze badges

2 Comments

Pardeep Jain Over a year ago

but there is not keyword named let in javascript it is in typescript i think

kryptokinght Over a year ago

@PardeepJain the let keyword has been introduced in the ES6 version of JS.

Prahlad · Accepted Answer · 2009-12-18 08:22:23Z

2

Similar to above solution but self invoking inside of setTimeout function

for(var it = 0; it < 2; it++)
{
    setTimeout(function(cur) {
        return function(){
           alert(cur);
        };
     }(it), 1);
 }

answered Dec 18, 2009 at 8:22

Prahlad

3643 silver badges6 bronze badges

Comments

Eivind Eklund · Accepted Answer · 2016-09-01 10:09:23Z

1

Similar to the other solutions, but in my opinion cleaner:

for (var it = 0; it < 2; it++) {
  // Capture the value of "it" for closure use
  (function(it) {
     setTimeout(function() {
       alert(it);
     }, 1);
  // End variable captured code
  })(it)
}

This keeps the same variable name for the capture, and does it for the entire loop, separating that from the logic of the timeout setup. If you want to add more logic inside the block, you can trivially do that.

The only thing I don't like about the solution is the repeat of "it" at the end.

answered Sep 1, 2016 at 10:09

Eivind Eklund

2091 silver badge5 bronze badges

Collectives™ on Stack Overflow

JavaScript variable binding and loop

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related