如何在 jquery 中延迟 getJson 异步？

Question

我有一个从数据库中提取的小部件列表，每个小部件都使用 switch 语句加载。我遇到的问题是，如果一个getJson 调用在另一个调用之前完成，即使它更进一步，它也会乱序加载。我怎样才能防止这种情况发生，以便它们可以按顺序加载？

var DashboardArray = DashBoardItems.split(",");
for (index = 0; index < DashboardArray.length; index++) {
    switch (DashboardArray[index]) {
        case 'totalHours':
            $.getJSON(hoursByType, function (json) { hrsByTypeJSON = json; HoursByType(); });
            break;
        case 'invoiceList':
            InvoiceListNav();
            break;
        case 'prevInvoiceWidget':
            PreviousInvoice();
            break;
        case 'payrollSchWidget':
            PayrollSchedule();
            break;
        case 'empListWidget':
            EmployeeList();
            break;
        case 'executiveOverview':
                $.getJSON(execOverview, function (json) { execOverJSON = json; ExecOverView(); });
            break;
        case 'grossWagesDept':
            $.getJSON(dashboardURL, function (json) {  gwdJSON = json; WagesByDept(); });
            break;
        case 'grosswagesbyTrend':
            $.getJSON(wagesByTrend, function (json) { wageTrendJSON = json; grosswagesbyTrend();});
            break;
        case 'wagesPos':
            $.getJSON(wagesByPosition, function (json) { posJSON = json; WagesByPos(); });
            break;
        case 'totalreghoursbyTrend':
            $.getJSON(RegHrsTrend, function (json1) {
                RegHrTrendJSON = json1;
                $.getJSON(OTHrsTrend, function (json2) {
                    OTHrTrendJSON = json2;
                    $.getJSON(PTOHrsTrend, function (json3) {
                        PTOHrTrendJSON = json3;
                        $.getJSON(OtherHrsTrend, function (json4) {
                            OtherHrTrendJSON = json4;
                            totalRegHoursTrend();
                        });
                    });
                });
            });

            break;
        case 'employeeByType':
            empTypePie();
            break;
        case 'totalInvoice':
            $.getJSON(totalInvoice, function (json) { TTLInvJSON = json; TotalInvoice(); });
            break;
        case 'totalInvoiceDept':
            $.getJSON(InvoiceByDiv, function (json) { InvDivJSON = json; TotalInvoiceDept(); });
            break;
        case 'totalinvoicebyTrend':
            $.getJSON(InvoiceTrend, function (json) { InvTrendJSON = json; totalInvoiceTrend(); });
            break;
    }

Answer 1

这需要一个很大的 promise 数组。然后你就可以在所有的promise都解决后执行所有的初始化代码了。

您有大量请求，因此只会处理totalreghoursbyTrend 的更复杂的嵌套请求

var promises = [];
for (index = 0; index < DashboardArray.length; index++) {
  switch (DashboardArray[index]) {
    ....

    case 'totalreghoursbyTrend':


      var request = $.getJSON(RegHrsTrend, function(json1) {
        RegHrTrendJSON = json1;
      }).then(function() {
        return $.getJSON(OTHrsTrend, function(json2) {
          OTHrTrendJSON = json2;
        });
      }).then(function() {
        return $.getJSON(PTOHrsTrend, function(json3) {
          PTOHrTrendJSON = json3;
        });
      }).then(function() {
        return $.getJSON(OtherHrsTrend, function(json4) {
          OtherHrTrendJSON = json4;
          //totalRegHoursTrend(); MOVE TO $.when().done()
        });
      });


    promises.push(request)

    break;
  }

}
 // fires when all promises pushed to array are resolved
$.when.apply(null, promises).done() {

   // initialize all widgets here in preferred order
   totalRegHoursTrend();

}).fail(function(f1Val, f2Val) {
    alert('Ooops....something in the promise chain got rejected');
});

我也看不出这些嵌套调用之间有任何关系，因此实际上它们可能能够在另一个 $.when() 中同时被调用，并将该承诺推送到承诺数组