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

Question

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

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

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

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 堆图的 Chrome 调试器的屏幕截图(这个主题对于这个答案来说太复杂了——假设它是我们案例的总内存使用量)，我在其中反复调用 $('#object').slick () 在同一个 DOM 对象上(注意我使用了一个 ID 选择器)通过点击一个按钮在大约 10 秒的时间段内。此选项卡上应该没有其他 JS 事件。

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

同样，如果 DOM 元素变得不可访问，Slick 对象也应该被 GC。由于 Slick 基于 JQuery 扩展函数，因此应该在元素的 JQuery 对象被 GC 时进行 GC(因为它应该是对它的唯一引用，而 DOM 元素是对 JQuery 实例的唯一引用)。

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

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