Javascript for loop architecture for Html Rendering

Question

我有一个包含 10 个顶级对象的大数组文件。他们每个人都有10-100个孩子，每个孩子有10-100个孩子。

我现在处理它的方式是，如果一个三重 for 循环循环遍历 2000 个对象并为这些对象构建 html 并将其附加到页面。

$('body').append(generatedHTML);

我现在面临的问题是渲染需要很长时间，并且在处理时页面冻结。

有没有更好的方法来实施这样的解决方案？例如，一次加载一个步骤，以便用户在加载页面时仍然可以与页面交互？

下面的示例代码

for (var i = 0; i < rootElements; i++) {
  var child = rootElements[i];
  var new_obj = child.secondElement;
  for (var j = 0; j < new_obj.length; j++) {
  // Another for loop to process the children of new_obj

Answer 1

也许您可以使用setTimeout()来延迟加载内容。你也可以看看这个：http://www.javascriptkata.com/2010/08/10/nofreeze-a-library-that-avoids-freezing-in-javascript/