Show Spinner With One Or More Async Ajax Requests

I have a web page. This page is start like as:

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

I want to show spinner while page is loading. All ajax requests are async.So that i can't decided which one is last. I change this code like as below:

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

But spinner is not shown at all loading time. How can i show spinner with more than one async ajax requests ?

I read difference async and sync requests tutorial. And i learnt this question answer. I thought asynchronous but i wrote code synchronous. Code should be as follows (with 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>

Warning spinner message is shown when these functions run with asynchronous.