Javascript 在块中向DOM添加项

我有一个来自服务器的巨大集合，我需要为集合中的每一行创建

DOM

元素

如果我尝试使用for循环将项目附加到

DOM

，我的浏览器会挂起一段时间。为了避免这种情况，我尝试使用

setTimeout

在块中添加项目，但在处理所有块之前，这些项目不会出现在UI中

如果我在代码中添加一个dubugger，对于每个迭代，我都可以看到它出现在

DOM

中

我创建了一个示例来模拟这一点

var longArray=[]；
对于（变量i=0；i<10000；i++）{
变量项={
“名称”：“项目”+i，
“Id”：我
};
长数组。推送（项目）；
}
var chunks=\ chunk.chunk（longArray，2）；
for（var i=0；i”）html（item.Id+”：“+item.Name）.appendTo（“ul”）；
});
}

我不会讲太多细节，因为这里会有很多相关主题。请理解，代码中有一个逻辑问题，基本上所有设置超时都在1000毫秒后一起运行。例如，按如下方式更改代码，它将正常工作

var longArray = [];
for (var i = 0; i < 10000; i++) {
    var item = {
      "Name": "item" + i,
      "Id": i
    };
    longArray.push(item);
 }
var chunks = _.chunk(longArray, 2);

function addItem() {
    var items = chunks.pop();
    _.forEach(items, function(item) {
      $("<li />").html(item.Id + " : " + item.Name).appendTo("ul");
    });

   if (chunks.length) {
     setTimeout(addItem, 1000);
   }
}

addItem();

var longArray=[]；
对于（变量i=0；i<10000；i++）{
变量项={
“名称”：“项目”+i，
“Id”：我
};
长数组。推送（项目）；
}
var chunks=\ chunk.chunk（longArray，2）；
函数addItem（）{
var items=chunks.pop（）；
_.forEach（项目、功能（项目）{
$（“
”）html（item.Id+”：“+item.Name）.appendTo（“ul”）；
});
if（chunks.length）{
设置超时（附加项，1000）；
}
}
addItem（）；

---

此外，您可以使用

requestAnimationFrame

而不是setTimeout，这将解决冻结问题，并且比setTimeout工作得更好

是的，我为测试增加了1秒延迟，但在此期间，我希望我添加到UI中的2项出现。这是没有发生的。顺便说一句，

setTimeout

需要一个函数作为第一个参数，现在您正在传递

undefined

。我只传递函数，可能是在原始代码中。但是在您的示例中，

addItem

返回

undefined

，这就是传递给

setTimeout

函数的内容。（您可以将超时设置为10秒，如果您想查看，列表仍将立即显示）谢谢，感谢感谢您建议

requestAnimationFrame