Wie mehrere Fortschrittsbalken behandelt werden sollten in Javascript

Question

Ich habe eine Reihe von Fortschrittsbalken jeweils an ein Div gebunden, die mit 'setTimeouts' aktualisiert werden.

Ein Beispiel, wie es läuft, ist wie folgt:

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

bearbeiten: Wie ein funktionierendes Beispiel für meine ein Fortschrittsbalken angefordert: http://jsfiddle.net/H4SCr/

Die Frage ist jedoch, ich mehrere divs haben mit Fortschrittsbalken mit eigenen Daten zur Berechnung der Progression. Was bedeutet, dass ich mit 5 unterwegs 5 verschiedene Timeouts laufen habe.

Ich bin kein Experte in Javascript, aber sicherlich gibt es eine Möglichkeit, dies zu strukturieren, um nur ein einziges Mal für alle Fortschrittsbalken zu binden, oder ist mein derzeitiger Ansatz die beste Methode?

Hinweis: Ich verwende jQuery nicht. Ich bevorzuge mit nur Vanille Javascript zu lernen! diese

Answer 1

Check out: http://jsfiddle.net/MZc8X/11/

habe ich eine Reihe von Objekten, die die Container-ID und seine Inkrementwert enthält.

// 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 
}]; 

Und dann eine Funktion aufrufen einen Fortschrittsbalken zu schaffen ...

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(); 

Hoffnung, es funktioniert für Sie.