Отображение ответов AJAX в том же порядке, в котором они были отправлены, * без * использования очередей или синхронных запросов?

Question

Я отправляю несколько запросов getJSON () на удаленный сервер (для получения изображений), и я хотел бы отображать ответы (изображения) в том же порядке, в котором я отправляю запросы.Проблема в том, что AJAX является асинхронным, поэтому ответы приходят в любом порядке, который они хотят - обычно все смешиваются.

Я мог бы поставить их в очередь или сделать их синхронными - отправляя только один запрос за раз - но это серьезноограничить производительность.

Так есть ли способ определить, какой ответ принадлежит какому запросу, когда ответы возвращаются?Я думал, что вы могли бы поместить переменную "id" в параметр обратного вызова JSON (например, callback = response03) и затем каким-то образом проанализировать это имя функции обратного вызова при получении ответа (таким образом, захватывая id, "03").Но, вероятно, нет.

Мой код выглядит примерно так:

// Send off requests for each keyword string
$.each($imageRequests, function() {
    $request = this;
    $url = "http://www.example.com/api?q="+$url;
    $.getJSON($url, function($response) {
        if($response.data.items) {
            $.each($response.data.items, function($i, $data) {
                $imgUrl = $data.url;
                $("#imageList").append($imgUrl);
            });
        }
    });
});

Я пытался создать несколько новых элементов div для хранения возвращаемых изображений, думая, что мог бы заполнить элементы div ихсоответствующие изображения, но это тоже не сработало.

// Create new div with unique id using line number
$i = 0;
$.each($lines, function() {
    $newDiv = '<div id="img_'+$i+'"></div>';
    $("#imageList").append($newDiv);
    $i++;
});

// Then do the same as the code above but shove the responses into "#img_$i" using the iterator variable to "keep track" (which didn't work).

Я искал, и хотя здесь есть похожих вопросов об AJAX, ни один из них не настолько специфичен, как мойищу.

Спасибо.

РЕДАКТИРОВАТЬ - иду спать только сейчас, но я вернусь завтра - если вы можете, пожалуйста, зайдите.Я очень ценю помощь.:) * * 1021

Answer 1

Ты почти там; просто нужно создать div таким образом, чтобы функция обратного вызова Ajax могла ссылаться на соответствующий div, т.е. используя замыкание . Как то так:

$.each(urls, function(i, url) {
    var div = $('<div />');
    list.append(div); // list is the container element that holds the images

    $.getJSON(url, function(data) {
        // assuming data is an image url - adjust accordingly
        div.append('<img src="' + data + '" />');
    });
});

Answer 2

Действительно полезно иметь надлежащий CPS при выполнении таких вещей. С JooseX-CPS вы можете использовать его конструкцию AND для распараллеливания операций, гарантируя правильный порядок возвращаемых значений. А вот учебник (установите флажок Показать мне параллель).

Answer 3

each() обратный вызов в jQ имеет параметр - индекс элемента или номер итерации. Таким образом, вы можете создать массив s заранее и по прибытии установить / изменить div с этим индексом:

var divs = $("div.your-class");
$.each($imageRequests, function(irIndex) {
    $.getJSON(url, function(response) {
     // change element at irIndex using the response.
     divs[irIndex].someUpdate(response); 

    });
});

Answer 4

Вместо добавления идентификатора, как насчет даты? Таким образом, вы можете действительно отсортировать по «когда» запрос был сделан. Идея временного разделения также может хорошо работать, если вы используете плагин TinySort .

Создать переменную отметки времени где-нибудь еще.

var stamp = new Date();

Затем добавьте миллисекунды к каждому запросу.

$.each($imageRequests, function() {
    $request = this;
    $url = "http://www.example.com/api?q="+$url+"&stamp="+stamp.getMilliseconds();
    $.getJSON($url, function($response) {
        if($response.data.items) {
            $.each($response.data.items, function($i, $data) {
                $url = '<img alt="'+ $data.stamp +'" src="'+ $data.url +'" />';
                $("#tempdiv").append($url);

                // After appending, you can sort them
                $("#tempdiv").tsort("img",{order:"desc",attr:"alt"});
            });
        }
    });
});