Page not updating during busy javascript code

Question

I have a pretty long javascript script. The problem is that in the middle of it I want to change a div's innerHtml to say "almost done please wait". I think the issue is that I call a jquery function. The in the success callback of the function I call another function which is where I am trying to update the page from.

If I set a breakpoint using firebug and step through the code, the page updates and I see the div's message. But if I just let the code run, I don't see the message. If I set an alert box before and after updating the div I see it too.

Anyone seen something like this before?

Thank you!

Answer 1

Typically when JS code is being run all other rendering is halted, just like what you're seeing. You can try to use the setTimeout function to allow rendering to occur on your page like so:

doStuff();
$('#myDiv').html('Almost done, please wait');
setTimeout(doMoreStuff, 50);

Note that doMoreStuff is another function that will do the last part of your processing.

If your code can be split up this way it will allow the browser to get in some render cycles. You might want to experiment with the delay (50 above) to find a number that works for you, but if all you want to do is set the content of a div then 50 should be ok (possibly even 0 will work).

Also, I can't remember the jQuery syntax for setting innerHTML but I think the point gets across :)