جافا سكريبت جانبي العميل، وإنشاء العديد من العناصر وإظهار كل asap

StackOverflow https://stackoverflow.com/questions/2408292

سؤال

ينشئ رمز جافا سكريبت جانبي العميل بعض العناصر (حوالي 50-100) في دورة:

for (var i = 0; i < list.length; i++) {
   var obj = document.createElement("DIV");
   obj.innerHTML = "<span class=\"itemId\">" + list[i].Id 
                   + "</span><!-- some more simple code --> ";

   mainObj.appendChild(obj);
}

هناك بعض المشاكل مع تقديم المتصفح. على سبيل المثال، أي يتجمد فقط حتى ينتهي من الدورة، ثم يعرض جميع العناصر في وقت واحد. هل هناك طريقة لإظهار كل عنصر تم إنشاؤه بشكل منفصل وفور appendChild()?

هل كانت مفيدة؟

المحلول

إدراج تأخير بين إضافة إدخالات متتالية، مع setTimeout(). 

function insertEntry(list, ix) {
    if (ix == null) {
        ix = 0;
    }
    else if (ix < list.length) {
        var elt= document.createElement("DIV");
        var attr = document.createAttribute('id');
        attr.value = 'item'+ix;
        elt.setAttributeNode(attr);
        elt.innerHTML = "<span class='itemCls'>" + list[ix].Id + ':&nbsp;' + list[ix].Name +
            "</span><!-- some more simple code -->\n";
        mainObj.appendChild(elt);
        ix++;
    }
    if (ix < list.length) {
        setTimeout(function(){insertEntry(list, ix);}, 20);
    }
}

طردها مع: 

    insertEntry(myList);

حيث شرافتي مثل هذا: 

var myList = [
    { Id : '1938377', Name : 'Sven'},
    { Id : '1398737', Name : 'Walt'},
    { Id : '9137387', Name : 'Edie'}
    ...
 };

التجريبي: http://jsbin.com/ehogo/4.

نصائح أخرى

هذا بسبب الطبيعة الخيوط الفردية للمتصفحات. لن يبدأ التقديم حتى يصبح الخيط خاملا. في هذه الحالة، عندما أكملت حلقة الخاص بك وتخرج الوظيفة. الطريقة الوحيدة حول هذا هي (نوع من) محاكاة مواضيع متعددة باستخدام أجهزة توقيت، مثل ذلك:

var timer,
    i = 0,
    max = list.length;

timer = window.setInterval(function ()
{
    if (i < max)
    {
        var obj = document.createElement("DIV");  
        obj.innerHTML = "<span class=\"itemId\">" + list[i].Id   
                + "</span><!-- some more simple code --> ";  

        mainObj.appendChild(obj);
        i++;
    }
    else
        window.clearInterval(timer);
}, 1);

العيب الواضح هو أن هذا سيستغرق حلقاتك لفترة أطول لإكمال لأنه مناسبات العرض بين كل تكرار.

أنا wold تفعل ذلك مثل هذا باستخدام jQuery. في حين أن:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function() {
            timer = window.setInterval(function ()
            {
                for (var i = 0; i < 100; i++) {
                    $('#container').append('<div>testing</div><br />');
                }
            },10);
        });
    </script>
</head>
<body>
<div id="container"></div>

</body>
</html>

jQuery يفعل ذلك بسرعة، لن تحتاج حتى عناء إظهارها عند إنشاءها، ولكن يمكنك جعلها أكثر سلاسة عن طريق إضافة مؤقت كما يظهر المثال.

هل هناك سبب محدد تريد تحديث DOM بعد كل دورة؟ سيكون الكثير أسرع إذا قمت بإنشاء جميع العناصر في عنصر JavaScript واحد، وإضافة عنصر واحد إلى DOM عند الانتهاء من الدورة.

var holder = document.createElement("DIV");
for (var i = 0; i < list.Length; i++) {
   var obj = document.createElement("DIV");
   obj.innerHTML = "<span class=\"itemId\">" + list[i].Id 
                   + "</span><!-- some more simple code --> ";

   holder.appendChild(obj);
}
mainObj.appendChild(holder);
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top