W jaki sposób obsługiwać wiele pasków postępu w javascript

Question

Mam wiele pasków postępu, każdy związany z div, które są aktualizowane przy użyciu "setTimeouts".

Przykładem jak to działa to tak:

myDiv._timer = setTimeout(function() { 
      func_name(data) 
     }, 1); 

Edytuj: Zgodnie z wnioskiem działający przykład mojego baru jeden toku: http://jsfiddle.net/H4SCr/

Pytanie jednak jest, mam wiele div z prętami progresji z własnymi danymi do wykorzystania do obliczenia progresji. Co oznacza, że ​​5 razy w podróży mam 5 różnych limitów czasu.

Nie jestem ekspertem od javascript, ale z pewnością istnieje sposób na ustrukturowanie tego, aby powiązać go z jednym czasem dla wszystkich pasków postępu, czy moje obecne podejście jest najlepszą metodą?

Uwaga: nie używam jQuery. Wolę iść tylko z javascriptem wanilii, aby się uczyć!

Answer 1

to sprawdzić: http://jsfiddle.net/MZc8X/11/

utworzonego szereg obiektów, które zawiera identyfikator zbiorniku, a jej wartościami.

// array to maintain progress bars 
var 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 
}]; 

A, a następnie wywołać funkcję, aby stworzyć pasek postępu ...

var loopCnt = 1; // loop count to maintain width 
var pb_timeout; // progress bar timeout function 

// create progress bar function 

var createPB = function() { 

    var is_all_pb_complete = true; // flag to check whether all progress bar are completed executed 

    for (var i = 0; i < pbArr.length; i++) { 
     var childDiv = document.querySelector('#' + pbArr[i].pid + ' div'); // child div 
     var newWidth = loopCnt * pbArr[i].incr; // new width 
     if (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 timeout 
     clearTimeout(pb_timeout); 
     return; 
    } 

    loopCnt++; // increment loop count 

    // recall function 
    pb_timeout = setTimeout(function() { 
     createPB(); 
    }, 1000); 
} 

// call function to initiate progress bars 
createPB(); 

nadzieja, że ​​pracuje dla Ciebie.