在Jquery追加后立即渲染html

时间:2012-08-10 20:48:24

标签: javascript jquery loops append

我有一个像这样的循环

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

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

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

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

2 个答案:

答案 0 :(得分:5)

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

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

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

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

答案 1 :(得分:0)

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

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