2016-02-23 88 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