显示具有一个或多个异步 Ajax 请求的微调器

Question

我有一个网页。此页面的开头如下：

$(function () {
  PageFunction_1();
  PageFunction_2();
  PageFunction_3();
  PageFunction_4();
});

function PageFunction_1(){
  $.ajax({
        url : endpoint1,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_2(){
  $.ajax({
        url : endpoint2,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_3(){
  $.ajax({
        url : endpoint3,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_4(){
  $.ajax({
        url : endpoint4,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

我想在页面加载时显示微调器。所有 ajax 个请求都是 async.So，我无法决定哪一个是最后一个。我如下更改此代码：

    $(function () {
      PageFunction_1();
      PageFunction_2();
      PageFunction_3();
      PageFunction_4();
    });

    function PageFunction_1(){
      $.ajax({
            url : endpoint1,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            },
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_2(){
      $.ajax({
            url : endpoint2,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_3(){
      $.ajax({
            url : endpoint3,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_4(){
      $.ajax({
            url : endpoint4,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

但是在所有加载时间都没有显示微调器。我如何显示具有多个异步 ajax 请求的微调器？

Answer 1

我阅读了 difference async and sync requests 教程。我学会了这个问题的答案。我以为是异步的，但我写的代码是同步的。代码应如下（asyn=true）：

<script>
    $(function () {
      PageFunction_1();
    });

    function PageFunction_1(){
      $.ajax({
            url : endpoint1,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            },
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            PageFunction_2();
        }
        });
    }

    function PageFunction_2(){
      $.ajax({
            url : endpoint2,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");

          },
        complete: function () {
            debugger;
            PageFunction_3();
        }
        });
    }

    function PageFunction_3(){
      $.ajax({
            url : endpoint3,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");

          },
        complete: function () {
            debugger;
            PageFunction_4();
        }
        });
    }

    function PageFunction_4(){
      $.ajax({
            url : endpoint4,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }
</script>

当这些函数运行具有异步功能时，会显示警告微调器消息。

显示具有一个或多个异步 Ajax 请求的微调器

Show Spinner With One Or More Async Ajax Requests

javascript

jquery

multithreading

asynchronous

ajax-request