显示AJAX响应在它们被发出的相同顺序，*不*使用队列或同步的要求？ [英] Displaying AJAX responses in the same order in which they were sent out, *without* using queueing or synchronous requests?

问题描述

我送了一堆的getJSON（）的请求到远程服务器（获取图像），我想显示在我发送请求的相同顺序的反应（图像）。问题是，AJAX是异步的，所以响应进来任何为了他们想要的 - 通常都是混在一起

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.

那么，有没有办法，我可以找出哪些反应属于当响应回来哪些要求？我想你可以把一个id变量到JSON回调参数（如回调= response03），然后当响应到达某种方式解析回调函数名（从而抓住了ID，03）。但可能不会。

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.

我的code是这样的：

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

我试图创造了许多新的div来容纳返回的形象，想我可以填充各自的图像的div，但也不能工作。

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

我已经搜查，虽然也有<一href="http://stackoverflow.com/questions/5241254/how-to-ensure-ajax-requests-called-in-a-certain-order-get-the-response-in-the-sam">similar问题关于AJAX在这里，没有一个是具体的我在寻找什么。

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

感谢。

修改 - 前往床上刚才，但我会回来的明天 - 如果可以的话，请回来检查。我真的AP preciate的帮助。 ：）

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

推荐答案

您快到了;只需要创建 DIV 的的方式，Ajax回调函数可以在相应的 DIV ，即采用基准一个封闭。事情是这样的：

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

这篇关于显示AJAX响应在它们被发出的相同顺序，*不*使用队列或同步的要求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！