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

您可以保留一个变量来跟踪多个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 2

您可以使用计数器。

开始递增时，
完成后，减少它。
检查是否为零。如果是，请隐藏它。

基本理念：

(function(){

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

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

}());

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

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

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

3 个答案: