具有多个加载指示器的多个 AJAX 调用答案

【问题标题】：Multiple AJAX calls with multiple loading indicators具有多个加载指示器的多个 AJAX 调用
【发布时间】：2016-12-16 17:20:47
【问题描述】：

我在 ASP.net MVC 中有一个页面，我在其中使用 ajax 调用为每个 div 加载数据，其中有 6 个。我已经编写了两种方法来显示/隐藏这样的 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 调用的 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 调用？如果有任何解决方法。

【问题讨论】：

1) 添加代码 2) 将代码放入 sn-p 或代码块，而不是纯文本
您需要编写一个管理 ajax 请求的服务，并且在每个请求中您可以显示指标。响应或错误后，您可以停止指标。
@user3087839 我这样做了因为它不是一项服务，但我在 AJAX 结果上隐藏了指示器。出错时还有另一种情况。随着数据填充到 div 中，放心的 AJAX 调用会成功。
“你能告诉我这是否是由于多个同时 AJAX 调用造成的吗？以及是否有任何解决方法。” 为每个请求使用不同的元素作为“加载指示器”？或者，如果您希望显示/隐藏对应于多个请求的相同指示器，请创建逻辑来处理测量多个请求的成功。
@guest271314 不错。我已经尝试过了，但是由于 div 的数量从 2 到 100 不等。添加这么多指标也是不明智的，不同的指标会扭曲页面的整个UI。

标签： javascript jquery html ajax

【解决方案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)
    });
});

【讨论】：