JQuery show() is delayed in Internet Explorer/Chrome

Question

I have a "processing..." div overlay that I show with $('').show() prior to making ajax calls and hide on completion. The problem I'm running into is that if I want to show the div and then make several ajax calls prior to hiding the div again it seems to queue the events in Internet Explorer (7) and Chrome (2.0.172.39), but I get the expected result in Firefox (3.0.13). When there's a single ajax call it works fine. The code is something like this:

<div id="foo">processing...</div>
<button onclick="performSingle()" />  <-- This behaves like it's supposed to
<button onclick="performMultiple()" /> <-- This queues the events in IE/Chrome.

<script>
$(document).ready(function(){
    $('#foo').hide();
});

function singleAjaxCall() {
    $.ajax({
        url: ...,
        type: "GET",
        async: false, //There is a reason for this.
        success: function() {}
    });
}

function multipleAjaxCalls() {
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
    singleAjaxCall();
}

function performSingle(){
    $('#foo').show();
    singleAjaxCall();
    $('#foo').hide();
}

function performMultiple(){
    $('#foo').show();
    multipleAjaxCalls();
    $('#foo').hide();
}
</script>

Answer 1

Perhaps you should signal processing by attaching to the complete event of the individual ajax calls? If you daisy chain your ajax calls, that will force it to serialize and behave as I believe you want it to. Make sure to have the final method's complete hide the dialog, as the ajax calls won't block.

Answer 2

You can attach a function to call when the show is complete.

$('#foo').show( 0, function(){multipleAjaxCalls();} )

http://docs.jquery.com/Effects/show

Answer 3

Yeah, try nesting your Ajax calls. Something like this -

function singleAjaxCall() {
    $.ajax({
        url: ...,
        type: "GET",
        async: false, //There is a reason for this.
        success: myCallback1
    });
}


function myCallback1($data)
{
    if(some condition){
    performSingle();
    }
}

Answer 4

No way to succeed if async is set to false, the reason is well explained here and here.

When you set async to false the browser freezes, no matter what you were doing before. You should handle your ajax call asynchronously, and thus adapt your code (and maybe you could also have a look at this thread).