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\".

Answer 1

What you want is jQuery.Deferred().

Answer 2

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 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.