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

我异步进行两个Ajax调用，在每个调用中，我都显示一个这样的加载对话框，

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

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

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

我的HTML载入对话框代码:

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

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

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

最佳答案

您必须计算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);
    }
});