Question

When I’m using AJAX, I typically do something before each request to let the user know that they’ll be waiting for a second. This is usually done by just adding an animated loading gif. When I do this, Firefox does what you’d expect and adds the gif before moving control to the next line (where the AJAX is called). In Chrome, it locks the browser and doesn’t make any DOM changes at all (let alone load an image), including even changing the color of something, until the AJAX is done. This isn’t just AJAX though. It’s anything that holds control, and it never makes DOM changes until the control is given back to the window.

Example (using jQuery):

function submit_order()
{
    $('#my_element').css('color', '#FF0000');  // Make text red before calling AJAX
    $.getJSON('/api/', my_callback)
    // Note, in IE and Chrome #my_element isn't turned red until the AJAX finishes and my_callback is run
}

Why does this happen, and how can I solve it? I can’t use ASYNC because of the nature of the data (it would be a big mess). I experimented with using window.setTimeout(myajaxfunc, 150) after setting the style, to see if it would set the style, then do the timeout, but it appears it isn’t an issue with just AJAX, but rather the control of the script in general (I think, hence the title making mention to AJAX because this is the only time I ever run into this problem).

This doesn’t have anything to do with it being in a function BTW.

Answer 1

Look at jQuery’s ajaxStart, ajaxSend, ajaxStop and ajaxError methods, which let you attach events to the various parts of an Ajax process.