Stop browser locking during (synchronous) Ajax?

Question

What I am trying to do is append a loading image to a div (so the user knows something is loading) and then I call a jquery ajax function, which is set to "async: false". Here is my code:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
         type: "POST", /* this goesn't work with GET */
         url: urlValue, /*ex: "NBAgetGamesList.php" */
         data: parameters, /*ex: "param1=hello" */
         cache: false,
         async: false,
                     success: function(data){

                     }
});

The problem is that the browser locks and does not append the loading image until AFTER the ajax call is done which is useless of course. Firefox is the only browser that actually appends the loading image. IE, Chrome, and Safari DO NOT append the loading image.

I know browser locking happens because async is set to false but this is my only option because I have to wait for this request to complete before continuing because I need the data that is returned.

Is there any way around this? If I place an alert after the I append the loading image that works but I don't want an alert popping up every time.

Answer 1

Despite your assertion to the contrary you don't need it to be synchronous. Whatever you need to do with/after the response can be done in the success (and/or error or complete) callback. So change:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
// OTHER CODE

to be like this:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      // OTHER CODE
   }
});

Or move "OTHER CODE" to a separate function that you call from the success callback.

If you need something more complicated than that you could encapsulate the above in a function and pass a callback to it:

function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          // optional other processing here, then:
          callback(data);
       }
    });
}

// then from somewhere else in your code:
doAjaxStuff(function(data) {
   // do something with data
});