6

I have a loop which should be updating a progress bar as the loop increments, however it's only colouring the progress bar in one go after the loop has actually finished. I remember having a similar problem, if I used alert statements, the colouring would work, so I think it has to do with the concurrency of threads. To solve my old problem, I used setTimeout. However, this still isn't getting my progress bar coloured in real-time.

Here's what I'm doing:

for (var i = 0; i < numOfRows; i++) {
    setTimeout('ColourBlock(' + i + ')', 0);

    // do_work
}

function ColourBlock (position){
    document.getElementById("block" + position).style.backgroundColor = "orange";
}

Somebody told me it could be due to JavaScript optimization? Can anyone help please?

4 Answers 4

6

It's not about threads. It's about the fact that when code makes a rapid sequence of DOM or style changes, the browser does not attempt to update the view between each one. Instead, it waits for things to calm down and then repaints.

If you coded up a sequence as you describe with a non-zero timeout value (say, 100 milliseconds) for each change, then you would see it happen. As you've written it, with a zero millisecond timeout, all the updates are going to happen within a very short period of time - probably well under a millisecond, unless you've got thousands of those blocks.

(Note that your sample code wouldn't give 100 as the timeout to each change; you'd have to put them incrementally farther into the future, adding another 100 for each one. Or you could use an interval timer and cancel it after the last update.)

6
  • 6
    This has nothing to do with rapid changes or optimization and all to do with the fact that javascript code and UI run on the same thread; therefore UI cannot be updated while js code executes. Increasing timeout won't help either unless you increase it beyond function execution time, at which point you are already finished and don't really need progress bar any more.
    – Luc
    Apr 21, 2011 at 12:13
  • @Luc increasing the timeout will definitely help. Using a timeout value of zero for all of those will cause the timer events to all fire immediately after the event loop completes. A larger timeout value will definitely allow the browser time to refresh the view. As you can see in this jsfiddle example, even a 1 millisecond delay will allow for visible animation.
    – Pointy
    Apr 21, 2011 at 12:26
  • Thanks for this, you are correct. However, the problem is that I now have to 'hack' what the time should be, when this is supposed to inform a client of how long the process will take. I could force my progress bar to take 10 seconds completing and the process may have finished after 4 seconds :s
    – James
    Apr 21, 2011 at 12:36
  • In your jsfiddle example, you are using setInterval. Every time function in setInterval finishes execution, the UI takes over and updates itself. If you chane your interval to 0 the example still works showing it has nothing to do with allowing browser the time to update. Browser updates when js code finishes executing.
    – Luc
    Apr 21, 2011 at 12:41
  • Well, how are you getting the information about actual real-world "progress" in the first place?
    – Pointy
    Apr 21, 2011 at 12:41
6

Browsers will not update UI while executing javascript code. When code finishes and control is returned to UI, the updates will happen all at once.

This is also the reason why it worked with alerts - when alert poped up, the javascript execution was suspended and control was returned to the UI.

2

You'll need to use a closure so that when you call ColourBlock uses the value of i when it was called (which in the code below is assigned to currentPosition). Try changing your for loop to something like:

for (var i = 0; i < numofrows; i++) {
    (function() {
        var currentPosition = i;
        setTimeout(function() {
            ColourBlock(currentPosition);
        }, 500);
    })();
0

Try increasing the time in your setTimeout period. When I had a similar issue, we used a gap of 200 milli seconds and it worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.