javascript - 具有多个加载指示器的多个 AJAX 调用

Question

我在 ASP.net MVC 中有一个页面，我使用 ajax 调用为每个 div 加载数据，其中有 6 个 div。我已经编写了两种方法来显示/隐藏 div 的加载指示器，如下所示。

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

这是我的 ajax 调用之一(全部相同)

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

       //Populate Today-apt div
    });

加载和停止加载方法的定义

    (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);

下面是进行 ajax 调用的就绪方法。

 $(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();
});

效果很好。当数据加载到div中时，有时会出现此问题 但指示器确实隐藏了它自己。大多数时候它工作正常。

您能告诉我这是否是由于多个同时 AJAX 调用造成的吗？如果有任何解决方法。

Answer 1

return $.getJSON() 从函数调用中调用，使用 $.when(), .then() 在 $.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)
    });
});