javascript - 显示多个 ajax 请求的加载对话框

Question

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

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

在每个请求成功后，我将像这样隐藏加载对话框，

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

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

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

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

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

Answer 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);
    }
});

Answer 2

使用延迟：

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

Answer 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 函数

Answer 4

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