javascript - 客户端 javascript，创建多个元素并尽快显示每个元素

Question

客户端 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() 之后立即单独显示每个创建的元素？

Answer 1

这是由于浏览器的单线程特性。在线程空闲之前渲染不会开始。在这种情况下，它是您的循环完成并且函数退出的时候。解决这个问题的唯一方法是(某种程度上)使用计时器模拟多个线程，如下所示:

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

明显的缺点是，这会使您的循环花费更长的时间才能完成，因为它会在每次迭代之间调整渲染。