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

我异步调用了两个ajax，每次调用都会显示这样的加载对话框

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

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

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

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

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

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

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

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

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

您可以执行以下操作：

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函数使用：

---

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

您还可以使用和来全局解决该问题

var activeAjaxCount = 0;

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

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

---

显示ajax调用代码我显示加载对话框两次，第一次是默认的html本身，第二次是来自javascript文件的ajax请求，该请求将在document ready函数之前调用。我隐藏了两次加载对话框，第一次是关于文档准备功能，第二次是关于ajax请求成功。这确实是最好的方法，延迟执行和承诺比使用计数器或其他值来跟踪状态要干净得多。这是不正确的。文档中提到ajaxStart，“注册一个处理程序，在第一个Ajax请求开始时调用，这是一个Ajax事件。”。我的猜测是，对于这个示例，您最好使用ajaxSend：“在发送Ajax请求之前附加一个要执行的函数。这是一个Ajax事件。”