jQuery लूप में संलग्न है - डीओएम

Question

तक अपडेट नहीं होता है जब एक बड़े संग्रह पर लूपिंग और इसे डीओएम में जोड़ना, डीओएम केवल सभी वस्तुओं को जोड़ने के बाद ताज़ा हो जाता है। प्रत्येक append() कॉल के बाद डोम अपडेट क्यों नहीं होता? क्या मैं प्रत्येक संलग्नक के बाद डीओएम को रीफ्रेश करने के लिए मजबूर कर सकता हूं (या शायद प्रत्येक एन एपेंड के बाद)?

var i = 0; 
for (i=0; i<5000; i++) { 
    $('#collection').append('<li>Line Item</li>'); 
} 

Link to jsfiddle

नोट: मैं समझता हूँ कि बेहतर प्रदर्शन (डोम पुनर्प्रवाहित परहेज) एक स्थानीय चर के सभी तत्वों को जोड़कर, और फिर डोम है कि चर जोड़कर प्राप्त किया जा सकता। लेकिन मैं चाहता हूं कि पहले एन तत्व स्क्रीन पर प्रस्तुत करें, फिर अगला एन, आदि जब तक कि सभी तत्व प्रस्तुत नहीं किए जाते।

Answer 1

ब्राउज़र बंद हो जाता है में अधिकांश सब कुछ जबकि एक जावास्क्रिप्ट चल रहा है। इसमें उदाहरण के लिए डीओएम प्रतिपादन, ईवेंट हैंडलिंग, छवि एनीमेशन शामिल है।

डोम को प्रस्तुत करने का एकमात्र तरीका जावास्क्रिप्ट को समाप्त करना है। आप अद्यतन के बाद फिर से शुरू करने के लिए कोड setTimeout विधि का उपयोग कर सकते हैं:

var i = 0; 

function appendSomeItems() { 
    for (var j=0; j<50; i++, j++) { 
    $('#collection').append('<li>Line Item</li>'); 
    } 
    if (i < 5000) window.setTimeout(appendSomeItems, 0); 
} 

appendSomeItems(); 

डेमो: http://jsfiddle.net/Uf4N6/

Answer 2

हैं कि वास्तव में क्या आप क्या करना चाहते है ...

var i = 0; 
for (i=0; i<5000; i++) { 
    setTimeout(function() { 
     $('#collection').append('<li>Line Item</li>'); 
    }, 0); 
} 

Answer 3

आप एक समय में एक ब्राउज़र हर एक बार करने के लिए नियंत्रण वापस देने के लिए की जरूरत है:

var current = 0 


    function draw() { 
     var next = current + 10 
     for(var i = current; i < next; i++) { 
      $('#collection').append('<li>Line Item</li>'); 
     } 
     current = next 
     setTimeout(draw, 50); 
    } 

draw(); 

Answer 4

आम तौर पर, डोम को स्पर्श नहीं करते कृपया कई बार। यह एक प्रदर्शन हत्यारा है जैसा कि आपने पहले ही देखा है।

var result=""; 
for (i=0; i<5000; i++) { 
    result+='<li>Line Item</li>'; 
} 
$('#collection').append(result); 

इस तरह, आप केवल एक बार डोम को स्पर्श करते हैं!

एक वैकल्पिक तरीका सरणी का उपयोग कर रहा है।

var result=[]; 
for (i=0; i<5000; i++) { 
    result.push('<li>Line Item</li>'); 
} 
$('#collection').append(result.join(""));