title: Post and Comment does not work properly when display with jquery ajax with php
body: <p>I am working with the post and comment screen, where i have to extract the post from other table and comments related to other that particular post from other table and i am using ajax jquery for that but when changing tab very fastly 
  i can say that comment and post is not loading completely sometimes, but when i am using ajax with async:false it works perfectly but the problem is the browser hangs for some seconds. Is there any way i could know that web page loading status so that i can put there progress bar so it doen't seem that the browser getting hang, i have tried, oncomplete, when, then but it does not works, there is multiple ajax functions inside another ajax function because it cannot be retrieved in one ajax call, and html elements is also being appended with jquery  i have given this code as a example, please provide some help, thanks in adbance: </p>
  
  <pre><code>&lt;script&gt;
  $.ajax({
      type:'GET',
      url: 'get_record.php',
      dataType:'json',
      async: false,
      success:function(result){
          var mainDiv = $('#main_outer');
  
          $.each(result, function(key,value) {
              var box_wrapper = $('&lt;div&gt;').addClass('boxwrapper').appendTo(mainDiv);
          });
      },
      beforeSend: function(){
           $('.loader').show();  
      },
      complete: function(){
           $('.loader').hide(); 
      }  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/nsMsf.png" alt="enter image description here"></p>