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
});

Answer 2

What you want is jQuery.Deferred().

Answer 3

I came across this issue and I found a solution for it.
Suppose! you are really in need to use async : false in your ajax request and you want to show a loading Image while execution of ajax request. But ajax request is halting other UI operation (displaying of loading image) due to async : false. So, the simple solution for it, Use fadeIn to display loading image and fadeOut to hide loading image.

Here is a jsFiddle demo which contains a ajax request with async : false. Due to this, the loading Image in not displaying. (I used show method to display loading image.).

Here is another jsFiddle with fadeIn and fadeOut effect. It displays loading image regardless of async : false in ajax request.