title: jquery wait for animation to complete before ajax complete
body: <p>I am upload a spreadsheet to import the data into my database and before being inserted i run some server side validation on each value.</p>
  
  <p>I use jquery ajax to upload the file to the server and I get a response back of the processed data in the form of a multidimensional array</p>
  
  <pre><code>var errored = false;
  var items = [];
  var width;
  var percent;
  
  $("#uploadForm").ajaxForm({
      dataType: 'json',
      beforeSubmit: function() {
          errored = false;
          width = 0;
          percent = 0;
      },
      beforeSend: function() { //before sending form
          $('#upload-progress').show();
      },
      uploadProgress: function(event, position, total, percentComplete) { //on progress
          $('#load').width(percentComplete + '%') //update progressbar percent complete
          $('#load').html(percentComplete + '%'); //update status text
      },
      success: function(response) {
          var size = Object.keys(response.items).length + 1;
          //this will trigger the first callback.
          var base = $.when({});
          var promises = [];
  
          percent = 100 / Object.keys(response.items).length;
  
          $('#validate-progress').show();
          $('#UploadButton').html('&lt;i class="fa fa-cog fa-spin fa-fw"&gt;&lt;/i&gt; Validating Data');
  
          $.each(response.items, function(key, item) {
              var last = (key == size) ? true : false;
  
              promises.push(base = base.then(getAjaxDeferred(key, item, last)));
          });
      },
      complete: function() {
          $('#load').width('0%'); //update progressbar percent complete
          $('#upload-progress').hide();
          $(this).clearForm();
      }
  });
  </code></pre>
  
  <p>I then loop through each of the each row of the array and pass that to a jquery function which uses ajax and defer it until it completes before sending the next row.</p>
  
  <pre><code>function getAjaxDeferred(row, item, last) {
      return function() {
          // wrap with a deferred
          var defer = $.Deferred();
          $.ajax({ 
              url: 'path/to/file', 
              method: 'POST',
              data: {
                  row: row,
                  item: item
              },
              dataType: 'json',
              success: function(response) {
  
                  $('&lt;p&gt;' + response.description + ' &lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/p&gt;').appendTo('#inserted-rows');
                  items.push(response.item);                
  
                  if(last) {
                      $('&lt;p class="last-insert"&gt;All done!!&lt;/p&gt;').appendTo('#inserted-rows');
  
                      if(errored) {
                          $('#myModal-errors').modal('show');
                      }
                  }
                  width = width + percent;
                  $('#validating').width(width + '%').html((Math.round(width * 10) / 10).toFixed(0) + '%');
                  $('#inserted-rows').show().animate({ scrollTop: $('#inserted-rows').prop("scrollHeight") - $('#inserted-rows').height() }, 'fast');
              },
              complete: function() {
                  // resolve when complete always.  Even on failure we 
                  // want to keep going with other requests
                  defer.resolve();
              }
          });
          // return a promise so that we can chain properly in the each 
          return defer.promise();
      };
  }
  </code></pre>
  
  <p>Everything works exactly how I want on my development server (because it's a lot slower than production), a row is sent to the function, it validates on server, adds response to the output div, updates the progress bar width by a percentage and if it's the last row, will display a modal if any errors are found.</p>
  
  <p>The problem I have on the production server is because it's so quick, the progress bar is updating quicker than the animation so it completes straight away and the modal appears before the animation has completed.</p>
  
  <p>I have tried adding a complete: function() to the animation which stopped the modal from appearing until the last row had been processed but it didn't help with the progress bar updating too quickly.</p>
  
  <p>How can i delay the progress bar to wait until the animation has finished before updating width and also make the modal wait until the last row has been processed? </p>