Displaying AJAX responses in the same order in which they were sent out, *without* using queueing or synchronous requests?

Question

I'm sending out a bunch of getJSON() requests to a remote server (to fetch images), and I'd like to display the responses (images) in the same order in which I send the requests. Problem is, AJAX is asynchronous, so the responses come in whatever order they want - usually all mixed up.

I could queue them or make them synchronous - only sending out one request at a time - but that will severely limit the performance.

So is there a way I can identify which response belongs to which request when the responses come back? I was thinking you could put an "id" variable into the JSON callback parameter (e.g. callback=response03) and then somehow parse that callback function name when the response arrives (thus grabbing the id, "03"). But probably not.

My code is something like this:

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

I've tried creating a bunch of new divs to hold the returned images, thinking I could populate the divs with their respective images, but that didn't work either.

// 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).

I've searched and although there are similar questions about AJAX on here, none are as specific as what I'm looking for.

Thanks.

EDIT - heading to bed just now but I will be back on tomorrow - if you can, please check back. I really appreciate the help. :)

Answer 1

You're almost there; just need to create the div's in a way that the Ajax callback function can reference the corresponding div, i.e. using a closure. Something like this:

$.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

Rather than appending the ID, how about a datestamp instead? This way you can really sort by "when" the request was made. Your temp div idea can also work nicely if you use the TinySort plugin.

Create a timestamp variable somewhere else..

var stamp = new Date();

Then append the milliseconds to each request.

$.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"});
            });
        }
    });
});

Answer 3

each() callback in jQ has a parameter - index of the element or number of iteration. So you can create array of s upfront and upon arrival to set/modify div at that index:

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

It's really helpful to have proper CPS when doing things like this. With JooseX-CPS you can use its AND construct to parallelize operations, guaranteeing the correct order of returned values. And here's a tutorial (check Show me the paralell).