Javascript 在Jquery追加后立即呈现html

我有一个像这样的环

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

（i=0；i<50000；i++）的

{
$（'body'）。追加（“lol”）；
}

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

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

---

如何使用Js/Jquery或其他客户端解决方案强迫他们使用Opera work？首先，这是一种非常糟糕的做法。每次追加都会强制重新播放，并像蛋糕一样吃掉性能

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

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

var i=5000；
变量倒计时=函数（）{
$（“正文”）。追加（“”）；
如果（i>0）{
我--；
设置超时（倒计时，0）；
}
}
倒计时（）；

---

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

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

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

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

var i=5000；
变量倒计时=函数（）{
$（“正文”）。追加（“”）；
如果（i>0）{
我--；
设置超时（倒计时，0）；
}
}
倒计时（）；

---

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

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

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

函数appendDiv（迭代，迭代限制）{
$（'body'）。追加（''）；
if（iteration使用带有setTimeout的递归函数。setTimeout允许浏览器在DOM更新之间更新UI

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

函数appendDiv（迭代，迭代限制）{
$（'body'）。追加（''）；
if（iteration）如果使用
窗口.setTimeout
或
窗口.setInterval
构造，让浏览器有时间更新视图，它将按照您的意愿工作。“追加”有什么问题吗？@ascii我想，重点是追加的HTML是空的
，但问题是”我可以在屏幕上看到“lol”被“附加”的元素div。@AnthonyGrist啊，谢谢，我现在明白了。如果你使用
窗口。setTimeout
或
窗口。setInterval
构造给浏览器时间来更新视图，它会按照你想要的方式工作。“附加”有什么问题吗“？@ascii lime我想重点是，被附加的HTML是一个空的
，但问题是“我可以在屏幕上看到“lol”被“附加”的元素div。”@AnthonyGrist啊，谢谢，我现在明白了。时间晚了，所以可能我很愚蠢，但这实际上并没有调用
倒计时（）
对吗？+1指出这是一个多么糟糕的想法，指责Javascript的var中声明了一个函数syntax@AnthonyGrist嗯，
countdown
不是直接调用的。它是作为对
setTimeout
的引用传递的，该引用将在时间到时调用它-在这种情况下是立即调用还是尽快调用。@TorstenWalter我想他的意思是，你没有启动循环，因为你没有调用它一次。还有其他解决方案，我不会停止使用循环？已经很晚了，所以可能我很愚蠢，但这实际上没有调用
倒计时（）
对吗？+1指出这是一个多么糟糕的想法，指责Javascript的var中声明了一个函数syntax@AnthonyGrist嗯，
countdown
不是直接调用的。它是作为对
setTimeout
的引用传递的，该引用将在时间到时调用它-在这种情况下是立即调用还是尽快调用。@Torsten沃尔特，我想他的意思是，你没有启动循环，因为你没有调用它一次。还有其他解决方案，我不会停止使用循环？