jquery - 我的 getJSON 调用随机返回结果，而不是它们被调用的顺序

Question

我需要发出多个 getJSON 请求才能将数据写入 HTML 文件。此示例显示了 3 个请求，但我将以相同的格式添加最多 6 个请求(可能更多)。

我的问题是结果以随机顺序返回，而不是按调用顺序返回。我怀疑它们是按照请求完成的顺序返回的。

我每次都必须以相同的顺序编写 div。

这些值是从 getJSON 请求返回的，每个请求的情况下还有两个实例来自一组本地变量(nwsltrID[0] 和 nwsltrNames[ 0]}，这对于每个请求都是唯一的。因此，由于这两个变量(如代码示例中所示)，我附加的 HTML 变得可变。

代码示例:

$.getJSON(url0, function (data) {
utcday =  data[0].createdOn;
ltrDay = moment.utc(utcday).format("DD MMM YY");                           

$('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[0] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[0] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url0 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>");   
});

$.getJSON(url1, function (data) {

utcday =  data[0].createdOn;
ltrDay = moment.utc(utcday).format("DD MMM YY");                           

$('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[1] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[1] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url1 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>"); 
});

$.getJSON(url2, function (data) {
utcday =  data[0].createdOn;
ltrDay = moment.utc(utcday).format("DD MMM YY");                           

$('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[2] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[2] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url2 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>"); 
}); 

我确信我在这里做了一些其他可以改进和优化的新手事情。 因此，我渴望听到所有建议。

我希望我已经提供了足够的信息来解决这个问题。

Answer 1

要订购 AJAX 查询，您可以使用 $.when 函数 - http://api.jquery.com/jquery.when/ :

这是给您的示例:

$.when( $.getJSON(url0), $.getJSON(url1), $.getJSON(url2) ).done( function() {
    $.each(arguments, function(index, result) {
        var data = result[0];
        utcday =  data[0].createdOn;
        ltrDay = moment.utc(utcday).format("DD MMM YY");

        $('#listDiv').append(... + nwsltrID[index] + .... + nwsltrNames[index]  + ... );
    });
});

无论您有多少查询 - 只需将其添加为 $.when 函数的参数即可!