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

Wow this problem is so common. We need to put a static answer on the front page.
@chaos: Right beneath "Don't do HTML with regex", I guess. ;)
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
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).

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

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.

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

up vote 7 down vote

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 '10 at 23:28

Tomalak
120k15158286

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

up vote 0 down vote

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

answered May 17 '10 at 23:22

BradBrening
2,843718

bobthabuilda · Answer 4 · 2010-05-17 23:26:37Z

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

asked	3 years ago
viewed	4203 times
active	3 years ago

scope of variables in JavaScript callback functions

4 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

Community Bulletin

Linked

scope of variables in JavaScript callback functions

4 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

Community Bulletin

Linked

Related