显示AJAX响应在它们被发出的相同顺序,*不*使用队列或同步的要求?队列、顺序、AJAX

2023-09-11 00:51:22 作者:心祭

我送了一堆的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).

我已经搜查,虽然也有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 + '" />');
    });
});