客户端的JavaScript，几个元素的创建和显示每个尽快

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

题

的JavaScript代码创建在一个周期内的一些元素（约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);
}

有一些问题与浏览器渲染。例如，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);

明显的缺点是，这将花费你的循环更长的时间来完成，因为它的装修渲染其间的每一次迭代。

我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