呈现HTML jQuery的追加后，立即 [英] Render html immediately after Jquery append

问题描述

我有一个循环这个样子的。

I have a loop look like this

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

在Opera浏览器我可以看到的内容笑被追加元素的div屏幕。

In Opera Browser I can See the element div with content "lol" being "appended" in screen.

但在Chrome浏览器，火狐，IE等我能看到的div只有当到达循环结束

But in Chrome, Firefox, IE etc I can see the divs only when loop arrive end

如何强迫他们使用JS / jQuery的或其他客户端解决方案歌剧院工作瓯POG ???工作

How force them to work with Opera work using Js/Jquery or other client-side solution ou POG???

推荐答案

首先，这是非常糟糕的做法。每个追加强制重新布局，吃像蛋糕性能。

First of all, this is really bad practice. Each append forces a relayout and eats performance like cake.

这就是说，运行回路档UI更新。因此，只要使用异步循环，自参考函数超时通​​话，让UI刷新。

That said, running a loop stalls UI updates. So just use an "async loop", a self referencing function with a timeout call to allow the UI to refresh.

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

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

Added the actual function call.

这篇关于呈现HTML jQuery的追加后，立即的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！