javascriptで複数のプログレスバーを処理する方法

Question

divに結び付けられたプログレスバーの数が 'setTimeouts'を使って更新されています。

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

編集：私の1つのプログレスバーの実例を要求したとして：http://jsfiddle.net/H4SCr/

疑問がある。しかし、私が持っている複数のdivの

それは実行方法の例は、このようなものですプログレッションを計算するために使用する独自のデータを持つプログレスバーがあります。つまり、5回は、5つの異なるタイムアウトが実行されていることを意味します。

私はjavascriptの専門家ではありませんが、確かにこれを構造化してすべてのプログレスバーの1つのタイムアウトに結びつける方法、または私の現在のアプローチは最善の方法ですか？

注：jQueryは使用しません。私は学ぶためにちょうどバニラのjavascriptと行くことを好む！

Answer 1

はこれをチェックしてください： http://jsfiddle.net/MZc8X/11/

を私はコンテナIDとその増分値が含まれているオブジェクトの配列を作成しました。

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

そして、それはあなたのために働く

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

ホープ...プログレスバーを作成するための関数を呼び出します。