Scope and timing problems with for loops and setTimeout.

This should be easy but my head seems to be frazzled just now.

The result I'm aiming for is 0,1,2,0,1,2

My code so far.... here is a fiddle to play with.

function delayedLoad(page){    

    console.log(page);

};

function loadContent(){
    var i,
        len = 3   

    for (i = 0; i < len; i++) {

        console.log(i);

        setTimeout(function(){
            delayedLoad(i);
        },3000*i);   

    }
};

$(document).ready(functi开发者_如何学Goon(){
    // Load the content for the first time.
    loadContent();
}); 

This is a very common issue people hit.

The trouble is that the function you're passing to setTimeout in each iteration is referencing the same i variable.

JavaScript does not have block scope, only function scope. So to create a new scope that will retain the i value you want, you need to invoke a function inside the loop, passing it i.

Example: http://jsfiddle.net/GNwhR/3/

function set_up_timeout( j ) {
    setTimeout(function(){
        delayedLoad( j );
    },3000*j);
}


function loadContent(){
    var i,
        len = 3   

    for (i = 0; i < len; i++) {

        console.log(i);

        set_up_timeout( i ); 

    }
};

This places your setTimeout call in another function which is invoked and passed i in each iteration. This creates a new variable scope where j in the function references the proper value.

Another approach is to have the invoked function return a function:

Example: http://jsfiddle.net/GNwhR/4/

function set_up_callback( j ) {
    return function(){
        delayedLoad( j );
    };
}


function loadContent(){
    var i,
        len = 3   

    for (i = 0; i < len; i++) {

        console.log(i);

        setTimeout( set_up_callback( i ), 3000*i ); 

    }
};

This one calls set_up_callback, which returns a function that references j.

Finally, another common approach is to use an IIFE (immediately invoked function expression) to eliminate the named function. This is less clear IMO:

Example: http://jsfiddle.net/GNwhR/5/

function loadContent(){
    var i,
        len = 3   

    for (i = 0; i < len; i++) {

        console.log(i);

        setTimeout((function( j ){
            return function() {
                delayedLoad( j );
            };
        })( i ),3000*i);   

    }
};

This is basically the same as the previous example in that it returns a function. The main difference is that the function that returns the function is created and invoked inside the loop itself.

All of these illustrate the same concept, that you need to scope a variable if you wish to asynchronously reference it later and have it retain its expected value.

patrick's explanation is pretty well right on. Here's a bit of code to help you get around it.

function delayedLoad(page){    

    console.log(page);

};

function loadContent(){
    var i,
        len = 3    

    for (i = 0; i < len; i++) {

        console.log('in loop', i);

        setTimeout($.proxy(function(){
            delayedLoad(this.page);
        }, {page: i}),3000*i);   

    }
};

$(document).ready(function(){
    // Load the content for the first time.
    loadContent();
});

jQuery's proxy just resets what 'this' is pointing to in a function.. so, you can replace passing in a number to just resetting the scope :) (if that makes any sense.. long day)