长时间运行的 jQuery 方法 - 如何刷新 dom？ [复制]答案

【问题标题】：Long running jQuery method - how to refresh dom? [duplicate]长时间运行的 jQuery 方法 - 如何刷新 dom？ [复制]
【发布时间】：2015-02-08 18:49:31
【问题描述】：

更新

我想我必须更精确一点。

我有这个长时间运行的代码，可以将内容添加到我的 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 并将内容打印到页面上，这样用户就不会因为什么都没发生而感到无聊？

【问题讨论】：

我们需要看到更多的代码来告诉你这将是多么容易/实用。可能是一个瞬间，可能几乎是不可能的。最有可能的是，它更接近快照，但谁知道呢？
如何使用片段或父元素等并在附加之前创建结构。创建元素不应该花很长时间，几百个元素通常只需要几毫秒，需要很长时间的是不断更改 DOM，这是一种可怕的做事方式，一次替换所有内容。
我添加了一条更新评论...

标签： javascript jquery performance

【解决方案1】：

你可以使用 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

【讨论】：

嗨 - 请原谅我的问题，但在这种情况下我的超时帮助吗？这不是更耽误一切吗？

【解决方案2】：

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

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
我收集到的问题的症结在于，我能做些什么让用户在等待新内容时不会感到无聊？作者刷新 DOM 的想法并不是好的设计实践。
我不反对你。您的答案出现在低质量审核队列中，因为有人标记了它。它可能应该是评论而不是答案。
OP 希望让用户不会感到无聊。在用户体验/设计层面解决这个问题似乎是完全公平的游戏。