クライアントサイドJavaScript、いくつかの要素の作成とまもなく、それぞれを表示

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

質問

コードは、サイクル中のいくつかの要素（約50〜100）を作成するJavaScript

クライアント側

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

ブラウザのレンダリングを持ついくつかの問題があります。例えば、IEはそれがサイクルを完了するまで凍結し、次いで一度にすべての要素を示しています。 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);

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

明らかな欠点は、これは、それが各反復挟んレンダリングを当てはめているため完了に時間があなたのループを取るということです。

私はウォルド使用して、このようにそれを行うの 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は毎サイクル後に更新することにしたい具体的な理由はありますか？ あなたは1つのジャバスクリプト要素内のすべての要素を作成し、サイクルが終了した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