title: Reload page after .each function completes
body: <p>I am creating an array and pushing AJAX queries using jquery <code>$.ajax</code> with <code>$.each</code> function. I want that after the completion of array the page should refresh, but when I try to do this the page refreshes in between. When I use <code>async:false</code> for <code>$.ajax</code> queries, it works fine but this causes performance degradation (time taken for the ajax queries to complete increases by 5 times). Can someone give me pointers on how to go about it, following is the code I put in:</p>
  
  <pre><code>$('#update1').click(function()
  {
      $.each(testarray,function(k,valu)
      {
          var count = testarray.length;
          var checkloop = k+1;
          var valkor = "/webresources/api/v3/sites/current/pages/" + valu.value;
          var valkis = valu.checkbox;
  
          var request =
              $.ajax(
              {
                  url: valkor,
                  processData: false,
                  data: JSON.stringify({ "enabled" : valkis }),
  
                  type: "PUT",    
                  contentType: "application/json",
                  mimeType: "application/json ",
                  headers: { "Authorization": $.cookie('access_token') }
              })
  
          request.done(function(msg)
          {
              console.log("successfully updated"); 
          })
  
          request.fail(function(jqXHR)
          {
              console.log("Request failed.");
              console.log("Error code: " + jqXHR.status);
              console.log("Error text: " + jqXHR.statusText);
              console.log("Response text: " + jqXHR.responseText);
          })
  
          request.then(function()
          {
              location.reload(true);
          })
      }) 
  })
  </code></pre>
  
  <p>The above code refreshes the page without waiting for the loop to complete. I have even tried for loop. Please let me know what am I missing.</p>