Force immediate DOM update modified with jQuery in long-running function

Question

I have a javascript that takes about 2 seconds to execute (complex optimization algorithm). I want to set certain span to "working..." at the beginning of the function. I observe that the span doesn't change until the end of the function.

How can I force DOM changes propagation? or should I approach this differently all together?

I call the function from onclick on the button.

The function is something like:

function optimize() {
    $('#status').text('working...');
    // calculate for 2 seconds
    $('#status').text('done!');
}

That should work. Could you give a link to the non-functioning code? — lonesomeday, Oct 23 '10 at 17:15

score 12 · Accepted Answer · answered Oct 23 '10 at 18:06

Try wrapping the long running code in a setTimeout call:

function optimize() {
    $('#status').text('working...');
    window.setTimeout(function() {
        // calculate for 2 seconds
        $('#status').text('done!');
    }, 0);
}

This forces a new call stack for the long running code, allowing the repaint (changing of the text) to complete before the new call stack begins execution.

Force immediate DOM update modified with jQuery in long-running function

1 Answers1