时间戳

首页 > 解决方案 > 每次用户调用其初始化时销毁旧的光滑轮播实例

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

问题描述

我想知道是否应该在每次在可以调用 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'事件，但每次实例化一个光滑实例时它都不会被调用，只有init事件被调用！

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

标签： javascriptjquerygarbage-collectionslick.js

解决方案

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

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

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

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

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

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

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

推荐阅读