javascript - jQuery 可拖动 : memory leak

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这会识别出可能更适合您的新元素。