Làm thế nào nhiều thanh tiến trình được xử lý trong javascript

Question

Tôi có một số thanh tiến trình được gắn với một div được cập nhật bằng cách sử dụng 'setTimeouts'.

Một ví dụ về cách nó chạy là như thế này:

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

Sửa: Theo yêu cầu một ví dụ làm việc của thanh một tiến bộ của tôi: http://jsfiddle.net/H4SCr/

Câu hỏi đặt ra tuy nhiên là, tôi có nhiều div của với các thanh tiến triển với dữ liệu riêng của chúng để sử dụng để tính toán sự tiến triển. Có nghĩa là với nói 5 trên đường đi tôi có 5 thời gian chờ khác nhau chạy.

Tôi không có chuyên gia về javascript, nhưng chắc chắn có một cách để cấu trúc điều này để buộc chỉ một lần cho tất cả các thanh tiến trình hoặc phương pháp hiện tại của tôi là phương pháp tốt nhất?

Lưu ý: tôi không sử dụng jQuery. Tôi thích đi với chỉ javascript vanilla để tìm hiểu!

Answer 1

Kiểm tra này ra: http://jsfiddle.net/MZc8X/11/

Tôi tạo ra một mảng của các đối tượng, trong đó có id container và giá trị thặng dư của nó.

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

Và, sau đó gọi một chức năng để tạo ra một thanh tiến trình ...

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

Hope, nó làm việc cho bạn.