在 Jquery 追加后立即呈现 html [英] Render html immediately after Jquery append

问题描述

我有一个这样的循环

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

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

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

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

解决方案

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

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

var i = 5000;var 倒计时 = 函数 () {$("body").append("
");如果 (i > 0) {一世 - ;window.setTimeout(倒计时, 0);}}倒数();

添加了实际的函数调用.

I have a loop look like this

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

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

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

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.

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

Edit: Added the actual function call.

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