ansaurus

Question

scope of variables in JavaScript callback functions

Answer 1

+6 A:

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.

SLaks 2010-05-17 23:20:02

The function level scoping makes this a must.

ChaosPandion 2010-05-17 23:22:46

Answer 2

A:

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

BradBrening 2010-05-17 23:22:29

Answer 3

A:

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

bobthabuilda 2010-05-17 23:26:37

Answer 4

+1 A:

Alternative to SLaks' answer

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

Tomalak 2010-05-17 23:28:04

ansaurus

tags:

views:

answers:

scope of variables in JavaScript callback functions

related questions