Question

下面的集合运行4个JSON请求，然后创建一个div以获得前置到另一个div。但我似乎无法使项目的顺序保持一致。我知道这是因为有多个请求并且它们在不同时间加载，但我无法弄清楚如何组合所有请求并传递变量。如果我可以在同一个语句中获得所有请求，我可以只创建一个大的前置，但我似乎无法使变量正确。

$(document).ready(function() {
    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var bibs = data[0].n;
var bibs2 = data[1].n;


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Patrons added and expired yesterday</thead><tbody><tr><td><strong>New Patrons</strong></td><td><strong>Expired Patrons</strong></td></tr><tr><td><center>' + bibs + '</center></td><td><center>' + bibs2 + '</center></td></tbody></table></div>');

});

    }



    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var items = data[0].n;


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Items Checked Out Yesterday</thead><tbody><tr><td><center>' + items + ' </center></td></tbody></table></div>');

});

    }

    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var house = data[0].totalcount;


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">In House Use Yesterday</thead><tbody><tr><td><center>' + house + ' </center></td></tbody></table></div>');

});

    }

    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var bibs = data[0].Total;
var bibs2 = data[1].Total;
var total = bibs - bibs2


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Net Patrons YTD</thead><tbody><tr><td><center>' + total + '</center></td></tr></tbody></table></div>');

});

    }
});

Answer 1

使用较新的Fetch API和Promise.all按特定顺序接收所有内容：

Promise.all([
  new Promise((resolve) => setTimeout(resolve, 100, 1)),
  new Promise((resolve) => setTimeout(resolve, 1000, 2)),
  new Promise((resolve) => setTimeout(resolve, 10, 3))
]).then(([a,b,c]) => console.log(c,b,a))

大约1秒后，此代码将以相反的顺序将所有值记录到控制台，动态取消引用。

有关Promises

的更多信息

一个更精选的例子：

Promise.all([
  !($(selector1).property.length) ? null : Fetch('xxx1').then(response => response.ok ? response.json() : null),
  !($(selector2).property.length) ? null : Fetch('xxx2').then(response => response.ok ? response.json() : null),
  !($(selector3).property.length) ? null : Fetch('xxx3').then(response => response.ok ? response.json() : null),
]).then(([a,b,c]) => console.log(c,b,a))

Answer 2

您可以创建一个div的序列，每个 newsitem 一个，这样您就可以将每个 newsitem 发送给您，并且您发送它们的顺序不会物质

多个getJSON请求和元素顺序

2 个答案: