Javascript Progress Bar Not Updating 'on The Fly', But All-at-once Once Process Finished?

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 remembe

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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.