How can I keep the browser from locking up (or show wait symbol) when making a synchronous request with jQuery?

Question

A function uses the jquery.ajax() method to get data from server and use it as return value. If I use async=true the function returns prematurely empty value. If I use async=false the wait for the function is too long. I tried toggle div showing spinning clock right before the request, but the div does not appear until the request is over.

Any advice on how not to lock the browser or show wait icon/symbol/text?

Answer 1

For not locking the browser you should use async request, maybe your code or ajax response needs refactoring.

But if you still not wanting to use async requests, you can do something like this:

1. Insert the spinning clock and show
2. When ready (and I mean a callback), make the ajax request
3. Finally, remove the clock

Answer 2

one way is to put an image (Loading... gif animated). Show it before you send the ajax. Then hide it on success. Just like below.

$.ajax({
  url: 'ajax/test.html',
  beforeSend : function(){
     $('#LodingImg').show(); // show image..
  },
  success: function(data) {
    $('#LodingImg').hide(); // hide image
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Answer 3

You can't. Synchronous requests will lock up the browser, including any animations you might have going or dom modifications that might be pending - that's why they're discouraged. Chances are, you're trying to return a value from the function firing off the ajax request, which WILL NOT WORK for async requests - modify your logic to handle the response processing in the success callback, and all will be well...