scope of variables in JavaScript callback functions

Question

I expected the code below to alert "0" and "1", but it alert "2" twice. I don't understand the reason. Don't know if it is a problem of jQuery. Also, please help me to edit title and tags of this post if they are inaccurate.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                for (var i=0; i<2; i++) {
                    $.get('http://www.google.com/', function() {
                        alert(i);
                    });
                }
            });
        </script>
    </head>
    <body>
    </body>
</html>

@chaos: Right beneath "Don't do HTML with regex", I guess. ;) — Tomalak
– Tomalak, Commented May 17, 2010 at 23:23
It's hard to pick just one for close: stackoverflow.com/questions/1734749 stackoverflow.com/questions/643542 stackoverflow.com/questions/1582634 stackoverflow.com/questions/1331769 stackoverflow.com/questions/1552941 stackoverflow.com/questions/750486 stackoverflow.com/questions/933343 stackoverflow.com/questions/1579978 stackoverflow.com/questions/1413916 stackoverflow.com/questions/2808471 — Christian C. Salvadó
– Christian C. Salvadó, Commented May 17, 2010 at 23:42
To be fair, the Closure Loop Problem is something that's arguably a language design flaw in JavaScript (and others that provide closures but still use C-style per-function scoping). — bobince
– bobince, Commented May 17, 2010 at 23:47

SLaks · Accepted Answer · 2010-05-17 23:20:02Z

39

You're sharing the single i variable among all of the callbacks.

Because Javascript closures capture variables by reference, the callbacks will always use the current value of i. Therefore, when jQuery calls the callbacks after the loop executes, i will always be 2.

You need to reference i as the parameter to a separate function.

For example:

function sendRequest(i) {
    $.get('http://www.google.com/', function() {
        alert(i);
    });
}

for (var i = 0; i < 2; i++) {
    sendRequest(i);
}

This way, each callback will have a separate closure with a separate i parameter.

answered May 17, 2010 at 23:20

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

Tomalak · Accepted Answer · 2010-05-17 23:28:04Z

13

Alternative to SLaks' answer

$(function() {
    for (var i=0; i<2; i++) {
        $.get('http://www.google.com/', function(i) {
            return function() { alert(i); }
        }(i));
    }
});

answered May 17, 2010 at 23:28

Tomalak

339k68 gold badges547 silver badges635 bronze badges

1 Comment

Tomalak Over a year ago

@RTF No, it's the same thing, just expressed differently. Also, things like this are very likely the last place where your performance goes down the drain, so use it because you like it better, not because you believe it could be faster. (To be absolutely honest, it's not exactly the same. It creates one extra function object per loop iteration. Measure the performance difference and find out if you should care.)

ground5hark · Accepted Answer · 2010-05-17 23:26:37Z

1

What's occurring here is your AJAX request $.get is completing after the loop has completed. Because of this, i ends up being the final variable it's set to when the iterations complete, being 2. This is just a weird JavaScript gotcha, and has nothing to do with jQuery.

One thing you can do is queue up these calls asynchronously so that iteration halts until the current AJAX request completes. If you don't want to do that, you can capture the variable i in a function closure in each iteration.

Something like this:

for ( var i = 0; i < 2; i++ )
    (function(iter){
        $.get('http://www.google.com/', function(){
            alert( iter );
        });
    })(i); // Capture i

answered May 17, 2010 at 23:26

ground5hark

4,5249 gold badges33 silver badges35 bronze badges

Comments

Leigh McCulloch · Accepted Answer · 2014-04-03 19:57:29Z

1

An alternative solution to this is to take your callback and literally make it a named function.

Why would I want to do this?
If a function is doing something where a variable needs to take new scope then it's likely the anonymous function warrants breaking out into a new function. This will also ensure that extra complexity is not introduced to your code by having to copy variables or wrap callbacks. You're code will remain simple and self descriptive.

Example:

function getGoogleAndAlertIfSuccess(attemptNumber) {
    $.get('http://www.google.com/', function() {
        alert(attemptNumber);
    });
}

function testGoogle() {
    for (var i=0; i<2; i++) {
        getGoogleAndAlertIfSuccess(i);
    }
}

answered Apr 3, 2014 at 19:57

Leigh McCulloch

1,98425 silver badges25 bronze badges

Comments

BradBrening · Accepted Answer · 2010-05-17 23:22:29Z

0

It appears that you've created a closure inside your loop The Mozilla Developers Reference has a good section about this.

answered May 17, 2010 at 23:22

BradBrening

5,50827 silver badges31 bronze badges

Collectives™ on Stack Overflow

scope of variables in JavaScript callback functions

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related