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?

What's wrong with the `async=true` request? Could you show us your code? — Daniel O'Hara, Aug 02 '10 at 04:33
It's 1000 lines of code :) Async true returns prematurely, and subsequent function get empty object — selytch, Aug 02 '10 at 07:09
Possible duplicate of [Stop browser locking during (synchronous) Ajax?](http://stackoverflow.com/questions/9755485/stop-browser-locking-during-synchronous-ajax) — Abhijit Jagtap, Oct 26 '16 at 09:20

score 2 · Accepted Answer · answered Aug 02 '10 at 06:00

2

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

answered Aug 02 '10 at 06:00

Shog9

156,901
35
231
235

any good resources on jquery handling async response from PHP mysql query? – selytch Aug 02 '10 at 07:08
@selytch: it's nothing specific to PHP or MySQL; it's how asynchronous calls must *always* be handled: everything you want to happen after the call needs to be triggered from the callback. See: http://stackoverflow.com/questions/2851952/jquery-ajax-function-to-call-php-script-which-returns-a-value or http://stackoverflow.com/questions/31129/how-can-i-return-a-variable-from-a-getjson-function or http://stackoverflow.com/questions/402503/ajax-return-data-not-working-in-jquery ... – Shog9 Aug 02 '10 at 15:51

score 1 · Answer 2 · answered Aug 02 '10 at 04:35

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:

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

answered Aug 02 '10 at 04:35

alcuadrado

8,340
3
24
25

Server responds with JSON object, which I understand (correct me if I'm wrong), requires SYNC. I also have hard time planning how to handle ASYNC response for array of objects... If I put $('#wait').show('fast',function () {$.ajax ....}) browser (Chrome) still refuses to show the #wait until request is complete. – selytch Aug 02 '10 at 05:05
I've used json many times with the default async mode. I don't see why it needs to be synchronous. – Benbob Aug 02 '10 at 05:53

score 1 · Answer 3 · answered Aug 02 '10 at 04:36

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

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

3 Answers3

Linked