文章/答案/技术大牛

发布

社区首页 >问答首页 >在Jquery追加后立即呈现html

问在Jquery追加后立即呈现html
EN

Stack Overflow用户

提问于 2012-08-11 04:48:24

回答 2查看 5.7K关注 0票数 1

我有一个像这样的循环

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

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

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

如何迫使他们使用Js/Jquery或其他POG客户端解决方案来处理Opera工作？

javascript

jquery

loops

append

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-08-11 04:52:47

首先，这是非常糟糕的做法。每个append都强制进行重新布局，并像蛋糕一样消耗性能。

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

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

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

票数 6

Stack Overflow用户

发布于 2012-08-11 04:55:40

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11909040

复制

相似问题

问在Jquery追加后立即呈现html
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Jquery追加后立即呈现htmlEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Jquery追加后立即呈现html
EN