显示多个 ajax 请求的加载对话框答案

【问题标题】：show loading dialog for multiple ajax request显示多个 ajax 请求的加载对话框
【发布时间】：2013-09-18 08:00:55
【问题描述】：

我正在异步进行两个 ajax 调用，每次调用时我都会显示一个像这样的加载对话框，

jQuery('#msg_writter').show();

每次请求成功后，我都会像这样隐藏加载对话框，

jQuery('#msg_writter').fadeOut(1000);

我用于加载对话框的 html 代码：

<div id="msg_writter" class="msgWritter">    
     <img src="/images/loading.gif"/>
</div>

当第一个请求完成时，加载对话框会消失，因此第二个请求不会显示加载对话框。

如何修改代码以显示从第一个请求到最后一个请求成功的加载对话框。

【问题讨论】：

显示你的ajax调用代码
我显示加载对话框两次，默认情况下是 html 本身，第二次来自 javascript 文件的 ajax 请求，此请求将在文档就绪函数之前调用。我两次隐藏加载对话框，第一次是文档准备功能，第二次是 ajax 请求成功。

标签： javascript jquery ajax

【解决方案1】：

您必须计算 AJAX 请求数：

var activeAjaxCount = 0;

// When making request, increment count and show loader
activeAjaxCount++;
jQuery('#msg_writter').show();

// On complete callback, decrease count and fadeout loader if count is zero
activeAjaxCount--;
if (activeAjaxCount == 0) {
    jQuery('#msg_writter').fadeOut(1000);
}

您也可以使用$.ajaxStart 和$.ajaxComplete 来全局解决这个问题。

var activeAjaxCount = 0;

$( document ).ajaxStart(function() {
    activeAjaxCount++;
    $('#msg_writter').show();
});

$( document ).ajaxComplete(function() {
    activeAjaxCount--;
    if (activeAjaxCount == 0) {
        jQuery('#msg_writter').fadeOut(1000);
    }
});

【讨论】：

这是不正确的。该文档对 ajaxStart 说“注册一个处理程序以在第一个 Ajax 请求开始时调用。这是一个 Ajax 事件。”。我的猜测是，对于这个示例，您最好使用 ajaxSend：“附加要在发送 Ajax 请求之前执行的函数。这是一个 Ajax 事件。”

【解决方案2】：

使用deferred:

jQuery('#msg_writter').show();
var a = $.ajax(...);
var b = $.ajax(...); // the other call
$.when(a,b).always(function() {
    jQuery('#msg_writter').fadeOut(1000);
});

【讨论】：

这确实是最好的方法，延迟执行和承诺比使用计数器或其他值来尝试跟踪状态要干净得多。

【解决方案3】：

你可以这样做：

var test1 = false;
var test2 = false;

var onSuccessAjax1 = function () {
    test1 = true;
    if (test1 && test2) {
        //hide loading animation
    }
}

var onSuccessAjax2 = function () {
    test2 = true;
    if (test1 && test2) {
        //hide loading animation
    }
}

当您的 ajax 调用成功终止时，您必须调用 onSuccessAjax 函数

【讨论】：

【解决方案4】：

我知道这是一个非常古老的问题但是我在任何地方都没有找到任何简单有效的解决方案，所以我进行了更多搜索，发现 jquery 提供了.ajaxStop() 专门为此目的发挥作用这是文档的链接 https://api.jquery.com/ajaxstop/

【讨论】：