Javascript 每次用户调用其初始化时销毁旧的slick carousel实例

Javascript 每次用户调用其初始化时销毁旧的slick carousel实例,javascript,jquery,garbage-collection,slick.js,Javascript,Jquery,Garbage Collection,Slick.js,我想知道我是否应该在每次调用可调用N+次的页面之前销毁我的Slick carousel实例? 我有一个日历,每次用户点击有事件的日期,我都会像这样初始化Slick $("#slickEvents").slick({options here}) if (slickIsInitialized) { $("#slickEvents").slick('unslick'); destroys the slick instance } $("#slickEvents").slick({option

我想知道我是否应该在每次调用可调用N+次的页面之前销毁我的Slick carousel实例? 我有一个日历,每次用户点击有事件的日期,我都会像这样初始化Slick

$("#slickEvents").slick({options here})
if (slickIsInitialized)
{
    $("#slickEvents").slick('unslick'); destroys the slick instance
}
$("#slickEvents").slick({options here});
然后,这些事件在一个圆滑的旋转木马中播放。如果用户在另一个日期单击事件,我会得到新的HTML,并且会再次调用Slick。因此,当用户在该日历页上时,可以调用N+次。 我是否需要担心Javascript构建实例而不在垃圾收集器中释放它们,或者我应该先检查一个光滑的实例是否已初始化,然后使用这样的光滑销毁方法

$("#slickEvents").slick({options here})
if (slickIsInitialized)
{
    $("#slickEvents").slick('unslick'); destroys the slick instance
}
$("#slickEvents").slick({options here});
Slick确实有一个名为“getSlick”的方法,但我不确定如何或是否可以这样使用它

$("#slickEvents").slick('getSlick');
我还寻找了一个“reInit”方法,但没有找到,只有一个“reInit”事件,但没有在每次实例化slick实例时调用它,只有init事件被调用


是否有办法在调试器中检查实例是否正在生成以及它们是否正在释放?我对JS有点陌生,来自C#背景

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

现在,回答你问题的第一部分,看来额外初始化Slick不会导致内存问题

这是一个来自Chrome调试器的JS堆图的屏幕截图(这个主题对于这个答案来说太复杂了——假设它是我们案例中的总内存使用量),我通过点击一个按钮在大约10秒的时间内反复调用同一个DOM对象上的
$('#object').slick()
。此选项卡上不应有其他JS活动

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

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

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


注意:关于
reInit
事件,似乎每当DOM操作发生时(例如向旋转木马添加新幻灯片或过滤旋转木马)都会触发该事件。实际上,这并不是任何形式的重新初始化(鉴于它的名称,这有点令人困惑)。

Peter,谢谢您提供的信息!这真的很有帮助,我尝试了内存分析器,看到了一个有趣的事件。当我单击有事件的日历日时,会调用slick并将事件信息加载到dom中的幻灯片中。如果我在同一天再次点击,加载同样光滑的幻灯片,并且我一遍又一遍地这样做,就不会出现内存累积。但是如果我点击一天,然后点击另一天,然后点击另一天,等等,然后查看分析器,内存确实在积累。所以现在我需要确定它是其他的还是光滑的。您能在探查器中为这一部分提供建议吗?不幸的是,探查器只显示总内存,而不是单个调用创建的内存。请记住,
$('some-selector').slick()
是一个工厂函数(因此,它为使用的每个选择器创建一个新对象),因此我预计内存使用量为O(n)(每个选择器都需要自己的对象,以便可以发出事件)。只要连接到的DOM元素Slick仍然在树中,对象就不会被GC处理<代码> unSulk/<代码>在我的测试中有空闲内存,但要考虑是否真的有必要。如果浏览器需要重新渲染对象,则初始化对象会有所帮助。