Using setTimeout to update progress bar when looping over multiple variables

Question

Suppose you have 3 arrays you want to loop over, with lengths x, y, and z, and for each loop, you want to update a progress bar. For example:

function run()         


        

Answer 1

Probably a jquery function in reportprogress plugin uses a setTimeout. For example if you use setTimeout and make it run after 0 milliseconds it doesn't mean that this will be run immediately. The script will be executed when no other javascript is executed.

Here you can see that i try to log count when its equal to 0. If i do it in setTimeout callback function then that is executed after all cycles and you will get 100000 no 0. This explains why progress-bar shows only 100%. js Fiddle link to this script

function run() {
    x = 100;
    y = 100;
    z = 10;
    count = 0;
    for (i=0; i

wrapping everything after for(i) in setTimeout callback function made the progress-bar work. js Fiddle link

Edit: Just checked that style setting code for item is actually executed all the time. I think that it might be a browser priority to execute javascript first and then display CSS changes.

I wrote a another example where i replaced first for loop with a setInterval function. It's a bit wrong to use it like this but maybe you can solve this with this hack.

var i=0;
var interval_i = setInterval(function (){

    for (j=0; j

JS Fiddle