How to report progress of a JavaScript function?

Posted by LambyPie on Stack Overflow See other posts from Stack Overflow or by LambyPie
Published on 2010-04-07T12:23:43Z Indexed on 2010/04/07 12:33 UTC
Read the original article Hit count: 215

Filed under:
|
|

I have a JavaScript function which is quite long and performs a number of tasks, I would like to report progress to the user by updating the contents of a SPAN element with a message as I go. I tried adding document.getElementById('spnProgress').innerText = ... statements throughout the function code.

However, whilst the function is executing the UI will not update and so you only ever see the last message written to the SPAN which is not very helpful.

My current solution is to break the task up into a number of functions, at the end of each I set the SPAN message and then "trigger" the next one with a window.setTimeout call with a very short delay (say 10ms). This yields control and allows the browser to repaint the SPAN with the updated message before starting the next step.

However I find this very messy and difficult to follow the code, I'm thinking there must be a better way. Does anyone have any suggestions? Is there any way to force the SPAN to repaint without having to leave the context of the function?

Thanks

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about progress