Массив в вызове ajax

Question

У меня есть следующий фрагмент кода для получения данных из 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>');
        window.setTimeout(null, 1000);
      }
    });
}

Код работает нормально, за исключением $('body').append('"'+titles[i]+'",');, который всегда возвращает один и тот же заголовок.

Answer 1

Цикл выполняется полностью до вызова любого из обработчиков успеха, поэтому, когда вы попадете в обработчик успеха, "i" будет последним заголовком.

Вам нужно что-то вроде

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)
    });
}

Answer 2

Вы не можете делать это так, вызов ajax будет выполняться асинхронно.Когда ваш метод успеха будет выполнен, значение вашей индексной переменной будет неправильным.Вы можете исправить это, если вы увеличиваете i из своего метода sucess, и ofcoruse не делает цикл for

Answer 3

Функция success является асинхронной (ей нужно дождаться ответа imdb), поэтому она всегда будет запускаться после завершения всего цикла, поэтому i внутри этой функции всегда будет быть последним i.

Самый простой способ обойти это - использовать функцию jQuery each:

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

Это работает, потому что функция сохраняет свою собственную область (и, следовательно, свою собственную копию i).

Answer 4

Проблема в том, что если вы вызовете асинхронную функцию в цикле, она будет использовать последнее присвоенное значение включающих переменных.

Это можно решить с помощью карри

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])
    });
}