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
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