Long 运行 jQuery 方法 - 如何刷新 dom？

Question

更新

我想我必须更精确一点。

我有这么长的运行代码，可以将内容添加到我的 DIV 中。这是代码示例：

m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);

问题是这真的需要一段时间，因为有时我要添加 100 个项目。并且内容只有在添加了所有 100 个项目后才会出现在页面上。所以用户不得不等待 30 秒左右。

我想要的是在添加 10 个左右的元素后更新 #test2 - DIV 然后继续添加元素

有没有办法刷新 DOM 或（更好）刷新 test2 - DIV 然后继续添加元素？

旧描述

我有一个很长的运行 jQuery 方法可以克隆 DIV 并将它们附加到页面。它看起来像这样：

m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);

此代码被调用多次（有时高达 100 次）并且内容显示在页面中需要很长时间。

有没有办法刷新 dom 并将内容打印到页面上，这样用户就不会因为什么都没发生而感到无聊？

Answer 1

这不是您想要的，但为什么不在加载时在您的页面上放置一个微调器，然后在操作完成后消失？这可能是一种更简洁的做事方法，而不是在用户使用页面时随机刷新页面。

Answer 2

您可以使用 setTimeout 做您想做的事。这就像我们用来做动画的逻辑一样。

// Code goes here
function load(index) {
    var m = jQuery('#test').clone();
    m.html("Element" + index)
    jQuery('#test2').append(m);

    if(index < 100) {
       setTimeout(function() {
         load(index + 1);
       },100); 
    }
}

$(document).ready(function(){
  load(0);
});

这是一个plunker

Long 运行 jQuery 方法 - 如何刷新 dom？

Long running jQuery method - how to refresh dom?

javascript

performance

jquery