javascript - jquery loading an image while async false

Question

I want to give a spinning gif image for the user to know something is happening while I am doing an ajax call with jquery. I have to use async:false because otherwise the code gets confused and we end up with a bad session variable. Here is what I have (that does not show the gif until after the call has frozen the screen.)

$('#status' + itemNum).html("<img width='14px' src='/style/images/spinner.gif'>");
if (foo == "bar") {
$.ajax({
   type:"POST",
   url: "foobar.html",
   async:false,
   data: "val1=" + escape(newValue) + "&val2=" + fieldName + "&val3=" + newValue2
   })
} else {
$.ajax({
   type:"POST",
   url: "foobar.html",
   data: "val1=" + escape(newValue) + "&val2=" + fieldName + "&val3=" + newValue3
   })
   document.getElementById('status' + itemNum).innerHTML = "SAVED";
}
$("#status" + itemNum).show();
setTimeout("fade_out('"+itemNum+"')", 1000);
}

In this case I only want the async when foo = bar. Can anyone let me know why the spinner.gif loads after the call. I am thinking that might be because the spinner isn't anywhere else and there is a delay in loading it, but still it doesn't show up when called multiple times (should be in cache by then), so I'm stumped.

Thanks!

Answer 1

This is not possible.
Since Javascript runs in the UI thread, async: false will freeze the browserm including all animation.

---

Do not use async: false!

You need to fix your code to handle asynchronous requests.