Javascript progress bar not updating 'on the fly', but all-at-once once process finished?

Question

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?

score 6 · Accepted Answer · answered Apr 21 '11 at 11:35

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

answered Apr 21 '11 at 11:35

Pointy

405,095
59
585
614

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 '11 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](http://jsfiddle.net/vcUs3/), even a 1 millisecond delay will allow for visible animation. – Pointy Apr 21 '11 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 '11 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 '11 at 12:41
Well, how are you getting the information about actual real-world "progress" in the first place? – Pointy Apr 21 '11 at 12:41
@Luc you'll note that in the original question, "setTimeout()" was mentioned. That will work too. We're both saying the same thing; I know how browsers work :-) – Pointy Apr 21 '11 at 12:42

score 6 · Answer 2 · answered Apr 21 '11 at 11:37

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.

Ian Oxley · Answer 3 · 2011-04-21T12:35:03.647

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);
    })();

edited Apr 21 '11 at 12:35

answered Apr 21 '11 at 11:38

Ian Oxley

10,916
6
42
49

score 0 · Answer 4 · answered Apr 21 '11 at 11:37

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.

answered Apr 21 '11 at 11:37

neebz

11,465
7
47
64

Javascript progress bar not updating 'on the fly', but all-at-once once process finished?

4 Answers4

Linked