Question

I found this great post on creating a progress bar with javascript:
Show javascript execution progress

It works great for me except for one section of code I am unable to integrate.

Assuming this approach:

var process = {
steps: [
                function(){
                //processing
            },
            function(){
                //processing
            },
            function(){
                element.each(function(index){
                    //processing
                });
            },
            function(){
                //processing
            },
            function(){
                //processing
            }
],
index: 0,
nextStep: function(){
    this.steps[this.index++]();
    if (this.index != this.steps.length) {
        var me = this;
        window.setTimeout(function(){
            me.nextStep();
        }, 0);
    }
}

};

process.nextStep();

This works great. However, I have a process that works like this:

element.each(function(index){
     //do some processing
});

One way to integrate this would be just to throw it in a function like this:

function(){
     element.each(function(index){
          //do some processing
     });
},

However, about 70% of the processing is done in this loop. So it kind of defeats the purpose of the progress bar if it for example jumps from 10% to 80%. What I would like to do is treat each iteration of this each loop as an anonymous function in the steps section. So the end goal is that in addition to counting each already defined function as a step each iteration of my each loop will be counted as a step Any ideas on how to do this? I tried to just throw the .each loop in there, but have had no success.

Thanks for the help.

Answer 1

This is a bit of a hack, but you can use the each() loop to populate a queue with your processing steps and subsequently execute that queue. In this case, I use an empty jQuery object as the queue. The setTimeout is required to make visibly changes the DOM.

For example:

var myQueue = $({});    

element.each(function(index){
    myQueue.queue('stack', function() {
        //do some processing
        setTimeout(function() { myQueue.dequeue('stack'); }, 10);
   }
});

The above works for jQuery 1.3, if using v1.4+:

var myQueue = $({});    

element.each(function(index){
    myQueue.queue('stack', function(next) {
        //do some processing
        setTimeout(function() { next(); }, 10);
   }
});

Once the queue is built and populated from your each loop, you can start the queue with:

myQueue.dequeue('stack');

See also What are queues in jQuery?