How do I delay getJson asynch in jquery?

Question

I have a list of widgets I pull from a database and each one loads in using a switch statement. The problem I have is that it loads out of order if one getJson call finished before another even if its further down the line. How can I prevent this from happening so they can load in order?

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;
    }

possible duplicate http://stackoverflow.com/questions/18387417/javascript-how-to-implement-a-queue-of-async-functions-without-libraries — phenxd, Feb 23 '16 at 19:32
what you need to do is not delay your requests, but queue them. — phenxd, Feb 23 '16 at 19:34
use the .done(function() {}) like explained here: [jQuery.getJSON()](http://api.jquery.com/jquery.getjson/) it holds the code to execute after succesful data retrival. — DIEGO CARRASCAL, Feb 23 '16 at 19:38
If i use the done function @DIEGOCARRASCAL I can't figure out how to move to the next case — TheDizzle, Feb 23 '16 at 19:43

charlietfl · Answer 1 · 2016-02-23T21:10:55.977

This requires a big promises array. Then you can execute all the initialization code when all the promises have been resolved.

You have a significant number of requests so will only tackle the more complicated nested one for 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');
});

I don't see any relationship between these nested calls either so in fact they might be able to be called simultaneously in another $.when() and have that promise pushed to the promise array

does returning a promise to the success callback work the same as returning to a .then callback? didn't think it did. — Kevin B, Feb 23 '16 at 20:39
@KevinB not sure but you are probably right...that's why I also wrote a flattened version of chained `then()` — charlietfl, Feb 23 '16 at 21:06

How do I delay getJson asynch in jquery?

1 Answers1