在Jquery追加后立即渲染html

Question

我有一个像这样的循环

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

在Opera浏览器中,我可以在屏幕中看到元素div,内容"lol"被"追加".

但是在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();

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