Question

I want to create a function that when called would display a “Loading…” message, and display the results as soon as it finishes. when I do it like this:

function load() {
    $('#status').html("loading...");

    /* do something */
    ...

    $('#status').html("done");
    $('results').html(result);
}

The “loading” message never appears, after a while what a user sees is just the “done” message and the results. How can I make the “loading” text appear just the moment I want it to?

Answer 1

If “do something” is synchronous, the browser never gets a chance to update the UI between the two content changes.

To have the changes appear you need to do something like:

$('#status').html('loading...');
setTimeout(function() {
     // do something

     $('#status').html('done');
}, 0);

The setTimeout call gives the UI a chance to update the display before jumping into your “something”.

Note that if possible you should try to ensure that “something” doesn’t tie up your browser for a long time. Try to break the task up into multiple chunks, where each chunk is also dispatched using setTimeout().