How Should Multiple Progress Bars Be Handled In Javascript
I have a number of progress bars each tied to a div which are updated using 'setTimeouts'. An example of how it runs is like this : myDiv._timer = setTimeout(function () {
Solution 1:
Check this out:http://jsfiddle.net/MZc8X/11/
I created an array of objects which contains the container id and its increment value.
// array to maintain progress barsvar pbArr = [{
pid: 'bar1', // parent container id
incr: 1// increment value
}, {
pid: 'bar2',
incr: 2
}, {
pid: 'bar3',
incr: 3
}, {
pid: 'bar4',
incr: 4
}, {
pid: 'bar5',
incr: 5
}];
And, then call a function to create a progress bar...
var loopCnt = 1; // loop count to maintain widthvar pb_timeout; // progress bar timeout function// create progress bar functionvar createPB = function () {
var is_all_pb_complete = true; // flag to check whether all progress bar are completed executedfor (var i = 0; i < pbArr.length; i++) {
var childDiv = document.querySelector('#' + pbArr[i].pid + ' div'); // child divvar newWidth = loopCnt * pbArr[i].incr; // new widthif (newWidth <= 100) {
is_all_pb_complete = false;
childDiv.style.width = newWidth + '%';
} else {
childDiv.style.width = '100%';
}
}
if (is_all_pb_complete) { // if true, then clear timeoutclearTimeout(pb_timeout);
return;
}
loopCnt++; // increment loop count// recall function
pb_timeout = setTimeout(function () {
createPB();
}, 1000);
}
// call function to initiate progress barscreatePB();
Hope, it works for you.
Post a Comment for "How Should Multiple Progress Bars Be Handled In Javascript"