javascript - 如何在不出现可怕的 "stop running this script?"对话框的情况下清除内容？

Question

在 Windows 窗体中，某些控件上有 BeginUpdate/EndUpdate 对。我想要类似的东西，但对于 jQuery。

---

我有一个 div，它包含一个 div。像这样:

<div id='reportHolder' class='column'>
  <div id='report'> </div>
</div>

在内部 div 中，我添加了一堆(7-12)对 a 和 div 元素，如下所示:

<h4><a>Heading1</a></h4>
<div> ...content here....</div>

内容的总大小可能是 200k。每个 div 只包含一个 HTML 片段。其中，有许多<span>元素，包含其他 html 元素，它们嵌套，可能有 5-8 层深。没有什么特别的，我不认为。 (更新:使用 this answer ，我了解到片段中有 139423 个元素。)

我添加完所有内容后，然后我创建了一个 Accordion 。像这样:

$('#report').accordion({collapsible:true, active:false});

一切正常。

问题是，当我尝试清除或删除报告 div 时，需要很长时间，而且我会收到 3 或 4 个弹出窗口，询问“您要停止运行此脚本吗？”

我试过几种方法:

选项 1:

    $('#report').accordion('destroy');
    $('#report').remove();
    $("#reportHolder").html("<div id='report'> </div>");

选项 2:

    $('#report').accordion('destroy');
    $('#report').html('');
    $("#reportHolder").html("<div id='report'> </div>");

选项 3:

    $('#report').accordion('destroy');
    $("#reportHolder").html("<div id='report'> </div>");

得到评论中的建议后，我也尝试了:

选项 4:

    $('#report').accordion('destroy');
    $('#report').empty();
    $("#reportHolder").html("<div id='report'> </div>");

无论如何，它挂了很长时间。

对 accordion('destroy') 的调用似乎不是延迟的根源。这是报告 div 中的 html 内容的删除。

这是 jQuery 1.3.2。

编辑 - 修复了代码拼写错误。

ps: 这发生在 FF3.5 和 IE8 上。

---

问题:

1. 为什么要这么长时间？

2. 如何更快地删除内容？

---

附录

我在“选项 4”期间闯入 FF 中的调试器，我看到的堆栈跟踪是:

data()
trigger()
triggerHandler()
add()
each()
each()
add()
empty()
each()
each()
(?)()    // <<-- this is the call to empty()
ResetUi()  // <<-- my code
onclick

我不明白为什么 add() 在堆栈中。我正在删除内容，而不是添加内容。恐怕在删除(全部)的上下文中，jQuery 做了一些幼稚的事情。就像它抓取 html 内容一样，替换文本以删除一个 html 元素，然后调用 .add() 以放回剩下的内容。

有没有办法告诉 jQuery 在从 dom 中删除 HTML 内容时不要传播事件？

在 Windows 窗体中，某些控件上有 BeginUpdate/EndUpdate 对。我想要类似的东西，但对于 jQuery。

---

相关:
jquery: fastest DOM insertion ?

Answer 1

你应该尝试绕过 jQuery 并在破坏 Accordion 后自己清空内容:

$('#report')[0].innerHTML = '';

这会快很多，但可能会导致 IE 内存泄漏(jQuery 竭尽全力确保没有任何引用阻止 IE 进行垃圾回收，这也是它删除速度如此缓慢的部分原因数据)。