Question

我有一个像这样的循环

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

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

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

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

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);
   }
}

在Jquery追加后立即渲染html

2 个答案: