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

使用deferred：

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/

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

4 个答案: