jQuery Draggable：内存泄漏

Question

我有一个简单的 html 表，它正在由一些 websocket 处理程序定期更新：

<table class="schedule">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        ...
    </tr>
    <tr>
        <td class="order"><div>Text 1</div></td>
        <td class="order">Text 2</td>
        <td class="order">Text 3</td>
        ...
    </tr>
</table>

（总共 14 列和大约 10-20 行，每行中的第一个单元格有一个没有类的 div 元素；行也没有 css 类。）

每次更新时都会从表中删除所有行/单元格，并且只有在动态添加新的“订单”单元格之后； dom 中没有重复的表（选中）；单元格必须是可拖动的，所以如果我在更新表格的函数末尾添加以下行，页面会在堆中泄漏大约 1 mb，向 DOM 添加大约 200 个新侦听器和大约 200 个新节点。 GC 从不收集这些对象：

var dnd = $("table.schedule td.order").draggable();

如果注释该行一切正常，GC 会收集所有内容。我怀疑问题出在我的选择器上，但我现在花了几个小时使用 Chrome 的工具，但仍然看不到问题出在哪里。非常感谢任何帮助。

Answer 1

您可能正在对现有的可拖动元素重新初始化draggable()，添加新的侦听器和其他东西。

尝试使用destroy 之类的方法

$("table.schedule td.order").draggable("destroy").draggable();

如果您可以改用sortable 小部件，它有一个refresh 可以识别可能更适合您的新元素。