在 Jquery 追加后立即渲染 html答案

【问题标题】：Render html immediately after Jquery append在 Jquery 追加后立即渲染 html
【发布时间】：2012-08-08 04:35:12
【问题描述】：

我有一个像这样的循环

for(i = 0; i < 50000; i++){
    $('body').append("<div>lol</div>');
}

在 Opera 浏览器中，我可以看到元素 div，内容“lol”被“附加”在屏幕中。

但在 Chrome、Firefox、IE 等中，我只能在循环到达结束时看到 div

如何强制他们使用 Js/Jquery 或 POG 的其他客户端解决方案来使用 Opera 工作？？？

【问题讨论】：

如果您使用window.setTimeout 或window.setInterval 构造来让浏览器有时间更新视图，它将按照您的意愿工作。
“附加”有什么问题？
@ascii-lime 我认为，关键是要附加的 HTML 是一个空的 <div>，但问题是“我可以看到元素 div 带有“lol”被“附加” “在屏幕上。”
@AnthonyGrist 啊谢谢，我现在明白了。

标签： javascript jquery loops append

【解决方案1】：

使用带有 setTimeout 的递归函数。 setTimeout 让浏览器在 DOM 更新之间更新 UI。

function appendDiv(iteration, iterationLimit) {
   $('body').append('<div></div>');
   if(iteration <= iterationLimit) {
      window.setTimeout(appendDiv, 1, iteration + 1, iterationLimit);
   }
}

【讨论】：

【解决方案2】：

首先，这是非常糟糕的做法。每个追加都会强制重新布局并像蛋糕一样吃掉性能。

也就是说，运行循环会停止 UI 更新。所以只需使用“异步循环”，一个带有超时调用的自引用函数，以允许 UI 刷新。

var i = 5000;
var countdown = function () {
    $("body").append("<div></div>");
    if (i > 0) {
        i--;
        window.setTimeout(countdown, 0);
    }
}
countdown();

编辑：添加了实际的函数调用。

【讨论】：

时间不早了，可能是我太傻了，但这并没有真正调用countdown() 对吧？
+1 指出这是一个多么糟糕的想法，为在 Javascript 的 var 语法中声明函数而摇摆不定
@AnthonyGrist 好吧，countdown 没有被直接调用。它作为对setTimeout 的引用传递，它将在时间到时调用它——在这种情况下是立即或尽快。
@TorstenWalter 我认为他的意思是，您没有启动循环，因为您没有调用一次。
还有其他我不会停止使用 for 循环的解决方案吗？