Array in ajax call

I have the following piece of code, to get data from IMDB :

for(var i in titles)
{
    $.ajax({
      url: "http://www.imdbapi.com/?t=" + titles[i],
      dataType: 'jsonp',
      success: function(data) {

        $('body').append('"'+titles[i]+'",');
        $.each(data, function(key, val) {
            $('body').append('"'+val+'",');
        });
        $('body').append('<br>')开发者_如何学JAVA;
        window.setTimeout(null, 1000);
      }
    });
}

The code works ok, except for $('body').append('"'+titles[i]+'",'); which alway returns the same title.

The loop executes completely before any of the success handlers are called, so when you get into a success handler "i" will be the last title.

You need something like

function makeSuccessHandler(titles, i) {
    return function (data) {
        $('body').append('"'+titles[i]+'",');
        $.each(data, function(key, val) {
            $('body').append('"'+val+'",');
        });
        $('body').append('<br>');
        window.setTimeout(null, 1000);
    }
}

for(var i = 0; i < titles.length; i++)
{
    $.ajax({
      url: "http://www.imdbapi.com/?t=" + titles[i],
      dataType: 'jsonp',
      success: makeSuccessHandler(titles, i)
    });
}

You can not do it like that, the ajax call will execute asynchronous. When your success method is executed the value of your index variable will not be correct. You can fix it if you increment i from your sucess method, and ofcoruse not do a for loop

The success function is asynchronous (it needs to wait for imdb to respond), so it will always run after the entire loop has finished - so i, within that function, will always be the last i.

Easiest way to work around this is to utilise jQuery's each function:

$.each(titles, function (i, value) {
    $.ajax({
        success: function (data) {
            // as usual...
        }
    });
});

This works because a function preserves its own scope (and hence its own copy of i).

The problem is that if you call an asynchronous function in a loop, it will use the last assigned value of enclosing variables.

This can be solved using currying

function appendTitle(var title)
{
    return function(var data) {
        $('body').append('"'+title+'",');
        $.each(data, function(key, val) {
            $('body').append('"'+val+'",');
        });
        $('body').append('<br>');
        window.setTimeout(null, 1000);
    }
}


for(var i in titles)
{
    $.ajax({
      url: "http://www.imdbapi.com/?t=" + titles[i],
      dataType: 'jsonp',
      success: appendTitle(titles[i])
    });
}