जावास्क्रिप्ट

Question

में एकाधिक प्रगति सलाखों को कैसे संभाला जाना चाहिए मेरे पास 'setTimeouts' का उपयोग करके अपडेट किए गए एक div से जुड़े कई प्रगति बार हैं।

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

संपादित:: मेरे एक प्रगति बार की एक काम उदाहरण अनुरोध किया के रूप में: http://jsfiddle.net/H4SCr/

सवाल फिर भी है, मेरे पास है कई div के

यह कैसे चलाता है का एक उदाहरण इस तरह है प्रगति की गणना करने के लिए उपयोग करने के लिए अपने डेटा के साथ प्रगति सलाखों के साथ। जिसका मतलब है कि 5 पर जाने के साथ मेरे पास 5 अलग-अलग टाइमआउट चल रहे हैं।

मैं जावास्क्रिप्ट में कोई विशेषज्ञ नहीं हूं, लेकिन निश्चित रूप से यह सभी प्रगति सलाखों के लिए केवल एक बार बाहर बांधने के लिए संरचना करने का एक तरीका है, या मेरा वर्तमान दृष्टिकोण सबसे अच्छा तरीका है?

नोट: मैं jQuery का उपयोग नहीं करता हूं। मैं सीखने के लिए सिर्फ वेनिला जावास्क्रिप्ट के साथ जाना पसंद करते हैं!

Answer 1

चेक इस बाहर: http://jsfiddle.net/MZc8X/11/

मैं वस्तुओं की एक सरणी जो कंटेनर आईडी और उसके वेतन वृद्धि मान बनाया।

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

आशा है, यह आप के लिए काम करता है।