如何在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數組。 然后，當所有承諾都已解決時，您可以執行所有初始化代碼。

您有大量的請求，因此只能處理totalreghoursbyTrend更復雜的嵌套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()同時被調用，並將該諾言推送到諾言數組中