DOM Updates blocked during async ajax request

DOM Updates blocked during async ajax request

I am fairly new to jQuery but have been able to do some pretty neat stuff with it however I have recently run into an issue. I have 2 ajax requests that are fairly simple. One starts a rather long SQL process and the other is called by recursive javascript function and updates a progress bar. The problem is that none of the UI/DOM updates that the second process performs become visible until after the first process finishes. Kinda makes the progress bar useless. I even tried eliminating the 2nd ajax call (just for testing) and updating the progress bar from a timed loop but I get the same results. Nothing on the screen until after the process finishes and then all the changes are applied. 

The long call. Note that I commented out the success function hoping it wouldn't wait for the script to finish but it still does. 
  2. $.ajax({
  3. type: "POST",
  4. url: '<?= $_SERVER['PHP_SELF'] ?>',
  5. data: jsonStr, 
  6. timeout: 300000,
  7. global: false
  8. contentType: "application/json"
  9. // success: function(data){
  10. // $('#complete').html(data);
  11. //
  12. // }
  13. });
The quick, repeating call to update the status bar. Note the data returned is the actual status bar update the #timer update is a debug bar that just updates by one pixel on each iteration just so I can tell if it's running or not. 
  2. $.ajax({
  3. type: "POST",
  4. url: '<?= $_SERVER['PHP_SELF'] ?>',
  5. data: jsonStr, 
  6. contentType: "application/json",
  7. global: false,
  8. success: function(data){
  9. $('#progress').html(data);
  10. w = $("#timer").width() + 1;
  11. $('#timer').css("width",w + 'px');
  12. }
  13. });