Mehrere AJAX-Aufrufe mit mehreren Ladeindikatoren

Question

Ich habe eine Seite in ASP.net MVC, wo ich Ajax-Aufruf verwenden, um Daten für jedes div zu laden, gibt es 6 von ihnen. Ich habe zwei Methoden geschrieben, Lade-Indikator für das Div wie folgt anzuzeigen/zu verbergen.

$("#divId").loading(); 
$("#divId").stopLoading(); 

Dies ist einer meiner Ajax-Aufruf (alle gleich sind)

$.getJSON("RequestPerameters", function (result, textStatus, jqHXR) 
    { 
     $("#today-apt").stopLoading(); 

     //Populate Today-apt div 
    }); 

definations zum Laden und StopLoading mehtods

(function ($) 
    { 
     $.fn.Loading = function() 
     { 
      $(this).children().hide(); 
      $(this).append("<img src='/Images/loading.gif' class='center-block' />"); 
      return this; 
     }; 

     $.fn.stopLoading = function() 
     { 
      $(this).children(":visible").remove(); 
      $(this).children().show(); 
      return this; 
     }; 
    })(jQuery); 

Unten ist die bereit Methode von wo aus die Ajax-Aufrufe sind Gemacht werden.

$(function() 
{ 


    $("#up-appointments").Loading(); 
    $("#mySales").Loading(); 
    $("#todays-appointments").Loading(); 
    $("#today-performance").Loading(); 
    $("#c-feed").Loading(); 

    loadPerformanceModal(); 
    loadAppointments(); 
    loadPTOs();// should be right after laodAppointments 
    loadMySales(); 
    loadUpCommingAppointments(); 
    loadUpCommingPTOs(); // should be right after loadUpCommingAppointments 
    loadCustomFeedback(); 
}); 

Es funktioniert gut. Das Problem tritt irgendwann auf, wenn Daten in das div geladen werden, aber der Indikator versteckt es selbst. Die meiste Zeit funktioniert es gut.

Können Sie mir sagen, ob dies an mehreren gleichzeitigen AJAX-Anrufen liegt? Und wenn es einen Workaround gibt.

Answer 1

return$.getJSON() Anruf von den Funktionsaufrufen verwenden $.when(), .then() zu verketten die asynchronen Anrufe innerhalb $.when()

$(function() { 

    var loadingDivs = "#up-appointments,#mySales,#todays-appointments" 
         + ",#today-performance,#c-feed"; 
    $(loadingDivs).Loading(); 

    $.when(loadPerformanceModal() 
     , loadAppointments() 
     .then(function() {return loadPTOs()})// should be right after  
     , laodAppointments() 
     , loadMySales() 
     , loadUpCommingAppointments() 
     .then(function() {return loadUpCommingPTOs()}) // should be right after 
     , loadUpCommingAppointments() 
     , loadCustomFeedback() 
    ) 
    .then(function(...responses) { 
     console.log(responses) 
    }) 
    .fail(function(jqxhr, textStatus, errorThrown) { 
     console.log(errorThrown) 
    }); 
});