CODEWITHSUNDEEP
javascriptjqueryprogress-bar
Bryce
Bryce

Reputation: 229

Jquery each loop: How to integrate into progress bar javascript code

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.

Upvotes: 1

Views: 1963

Answers (2)

lizbit
lizbit

Reputation: 313

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?

Upvotes: 2

Justin808
Justin808

Reputation: 21512

The method used for the progress bar is not compatible with a for each step. There is no way in this method to update the progress bar for each fraction of a step that the for each does. You would be better off using a different method to update the progress bar.

Upvotes: -1

Related Questions