2016-02-23 94 views
0

我有一個從數據庫中提取的小部件列表,每個小部件都使用switch語句加載。我遇到的問題是,如果一個getJson呼叫在另一個呼叫之前完成,即使它進一步下線,它也會無序地裝載。我怎樣才能防止這種情況發生,以便它們可以按順序加載?如何在jquery中延遲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; 
    } 
+0

可能的重複http://stackoverflow.com/questions/18387417/javascript-how-to-implement-a-queue-of-async-functions-without -libraries – phenxd

+0

你需要做的不是延遲你的請求,而是排隊。 – phenxd

+0

使用.done(function(){})就像這裏解釋的那樣:[jQuery.getJSON()](http://api.jquery.com/jquery.getjson/)它保存代碼在成功的數據檢索後執行。 –

回答

2

這需要一個大的承諾數組。然後,當所有的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(),並有承諾推到承諾陣列

+0

確實返回承諾成功回調工作是一樣回到一個.then回調?並不認爲它確實如此。 –

+0

@KevinB不知道,但你可能是正確的......這就是爲什麼我也寫了一個扁平版本的鏈接'then()' – charlietfl

+0

我有另一個JavaScript問題。你願意對此發表評論嗎?發佈答案的人沒有詳細說明,然後起飛。這裏是鏈接:http://stackoverflow.com/questions/35588344/how-do-i-connect-this-interval-service-to-a-view – CodeMed