每次用户调用其初始化时销毁旧的光滑轮播实例

Question

我想知道是否应该在每次在可以调用 N+ 次的页面上调用它之前销毁我的 Slick 轮播实例？ 前任。我有一个日历，每次用户点击带有事件的日期时，我都会像这样初始化 Slick

$("#slickEvents").slick({options here})

然后这些事件会显示在一个流畅的轮播中。如果用户单击另一个带有事件的日期，我会得到新的 HTML，并且 Slick 会再次被调用。因此，当用户在该日历页面上时，这可能会被调用 N+ 次。 我是否必须担心 Javascript 构建实例而不在某些垃圾收集器中释放它们，或者我应该检查是否首先初始化 Slick 实例然后使用像这样的 Slick 销毁方法

if (slickIsInitialized)
{
    $("#slickEvents").slick('unslick'); destroys the slick instance
}
$("#slickEvents").slick({options here});

Slick 确实有一个名为“getSlick”的方法，但我不确定如何或是否可以这样使用它

$("#slickEvents").slick('getSlick');

我还寻找了一个 'reInit' 方法，但没有看到一个，只有一个 'reInit' 事件，但每次我实例化一个 slick 实例时它都不会被调用，只有 init 事件被调用！

有没有办法在调试器中检查实例是否正在构建以及它们是否正在发布？我对 JS 有点陌生，来自 C# 背景

Answer 1

要回答您问题的第二部分，是的，有一种方法可以查看 JS 中的内存使用情况。在大多数浏览器的开发工具中都有一个 JS Profiler（在 Chrome 中它位于“性能”选项卡中）。 Here's 简要说明如何在 Chrome 中使用它，因为这是我在答案的后半部分使用的。

现在，要回答您问题的第一部分，Slick 的额外初始化似乎不会导致内存问题。

这是 JS Heap 图形的 Chrome 调试器的屏幕截图（对于这个答案来说，这个话题太复杂了——假设它是我们案例的总内存使用量），我在同一个 DOM 对象上反复调用 $('#object').slick()（注意我使用ID 选择器）在大约 10 秒的时间段内单击按钮。此选项卡上应该没有其他 JS 活动。

图表中的每个“步骤”都是对slick 的新调用，可在调用跟踪中验证（由于 Slick 进行其他初始化，因此在此处发布太大，但自己验证应该不难） .请注意，当“悬崖”发生时，额外的对象正在被垃圾收集（最后一部分保持高位，因为堆还没有变得足够大以触发另一个 Major GC 事件）。

同样，如果 DOM 元素变得不可访问，则 Slick 对象也应该被 GC'd。由于 Slick 基于 JQuery 扩展函数，因此当元素的 JQuery 对象存在时，它应该被 GC（因为它应该是对其的唯一引用，并且 DOM 元素是对 JQuery 实例的唯一引用）。

最后，以防我没有正确地阅读问题，您可能应该为新的 DOM 元素创建新的 Slick 实例。我注意到您担心为新页面元素创建一个新的 Slick 实例，但即使是库 Demo 页面也会这样做。由于 Slick 使用 JQuery，因此您需要这样做，以免意外导致在错误元素上触发事件（例如，如果您开始使用 slickAdd 函数）。

P.S.：关于reInit 事件，它似乎会在 DOM 操作发生时触发（例如向轮播添加新幻灯片或过滤轮播）。它实际上并不是任何类型的重新初始化（考虑到它的名称，这有点令人困惑）。