Question

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

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

这是我的一个ajax调用（All are same）

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

       //Populate Today-apt div
    });

加载和停止加载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);

以下是正在进行ajax调用的ready方法。

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

多个带有多个加载指示符的AJAX调用

1 个答案: