javascript - 在 Jquery 追加后立即渲染 html

Question

我有一个看起来像这样的循环

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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