加载动画在第二个 ajax 调用之前消失

Question

每当 ajax 调用开始时，我都会显示加载动画，而在 ajax 调用完成后会停止。当我在函数中只使用一个 ajax 调用时，它工作正常。但是，如果我在同一个函数中有两个 ajax 调用，似乎加载动画在第一个 ajax 调用完成后消失了。 我怎样才能让它一直保持到所有 ajax 调用完成？

谢谢。

main.js 文件中的Javascript：

//Show loading image on Ajax Start
    $(document).ajaxStart(function() {
      showPleaseWait();
    });

    //Hide loading image on Ajax complete
    $(document).ajaxComplete(function() {
      hidePleaseWait();
    });

员工页面中的Javascript：

<script type="text/javascript">
        $(document).ready(function () {
            $("#ddlEmployeeNumber").change(function () {
                $("#log").ajaxError(function (event, jqxhr, settings, exception) {
                    alert(exception);
                });

                var employeeNumberSelected = $("select option:selected").first().text();

                $.get('@Url.Action("EmployeeSelfServiceInfo")',
                    { chosenEmployeeNumber: employeeNumberSelected }, function (data) {
                        $("#EmployeeSelfServiceInfo").html(data);
                    });

                $.get('@Url.Action("GetEmployeeName")',
                    { chosenEmployeeNumber: employeeNumberSelected }, function (data) {
                        $("#employeeName").text(data);
                    });
            });
        });
</script>




function showPleaseWait() {
    var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\
        <div class="modal-dialog">\
            <div class="modal-content">\
                <div class="modal-header">\
                    <b>Processing...</b>\
                </div>\
                <div class="modal-body center-block">\
                    <div class="progress">\
                      <div class="progress-bar progress-bar-striped active" role="progressbar"\
                      aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%;">\
                          Please Wait...\
                      </div>\
                    </div>\
                </div>\
            </div>\
        </div>\
    </div>';
    $(document.body).append(modalLoading);
    $("#pleaseWaitDialog").modal("show");
}

 function hidePleaseWait() {
    $("#pleaseWaitDialog").modal("hide");
}

更新：所以我通过用 .ajaxStop 调用替换现有的 .ajaxComplete 调用来修复它。

Answer 1

您可以使用计数器。

• 在开始增加它，
• 完成后，将其递减。
• 检查它是否为零。如果是，请将其隐藏。

基本思路：

(function(){

    var openCount = 0;
    $(document).ajaxStart(function() {
      openCount++;
      showPleaseWait();
    });

    $(document).ajaxComplete(function() {
      openCount--;
      if(!openCount) hidePleaseWait();
    });

}());

Answer 2

您可以保留一个变量来跟踪多个 ajax 调用。

var ajaxCallCounter=0;
//Show loading image on Ajax Start
$(document).ajaxStart(function() {
  showPleaseWait();
});

//Hide loading image on Ajax complete
$(document).ajaxComplete(function() {
  if(ajaxCallCounter===0)
  {
    hidePleaseWait();
  }
});

每次进行 ajax 调用时，增加这个变量。当您的 ajax 调用从服务器获得响应时，请减少它。

ajaxCallCounter++;
$.get('@Url.Action("EmployeeSelfServiceInfo")',function(res){
   ajaxCallCounter--;
   //do something with the  res
});

在上面的例子中，我们使用了一个简单的全局变量（这不是很好）！您可以使用 javascript 命名空间来声明变量以防止可能覆盖此变量的值或将您的代码包装在 IIFE 中。

Answer 3

不要使用 ajaxStart 和 ajaxComplete，您可以将这些调用绑定到每个 $.get：

            $.get('@Url.Action("EmployeeSelfServiceInfo")',
                { chosenEmployeeNumber: employeeNumberSelected }, 
                beforeSend: showPleaseWait,
                complete:  hidePleaseWait,
                function (data) {
                    $("#EmployeeSelfServiceInfo").html(data);
                });


            $.get('@Url.Action("GetEmployeeName")',
                { chosenEmployeeNumber: employeeNumberSelected },  
                beforeSend: showPleaseWait,
                complete:  hidePleaseWait,
                function (data) {
                    $("#employeeName").text(data);
                });

问题在于，由于这些是异步调用，因此这些元素上的隐藏/显示可能看起来很奇怪。