Question

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

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

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

从getJSON请求返回的值加上每个请求中的两个实例来自本地的一组vars（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函数的参数！

Answer 2

你可以锁定你的电话：

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

A的{{1}}是异步的：请求是并行完成的，服务器并行应答，浏览器并行接收响应。每个请求都有自己的速度。

Answer 3

这个函数可以异步工作吗？所以它解雇了所有这三个并且完成的函数的回调（无论它将是谁）开始追加：o？

您可以让这些功能在同步模式下工作

Answer 4

或者你可以从＃listDiv

中的单独div开始

 $('#listDiv').append('<div class="ellipsis ellipsis0"></div><div class="ellipsis ellipsis1"></div><div class="ellipsis ellipsis2"></div>');

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

      $('#listDiv .ellipsis0').append('<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);   
 });

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

      $('#listDiv .ellipsis1').append('...' + data[0].textHead);   
 });

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

      $('#listDiv .ellipsis2').append('...' + data[0].textHead);   
 });

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

4 个答案: