Question

我在js中目睹了一些奇怪的事情。以下是案例研究：

var openModal = function() {

    ...

    var pgwSlider = $('.initPgwSlider').pgwSlider();

    $('#bootstrap-modal').on('shown.bs.modal', function () {
        pgwSlider.reload();
    });
    $('#bootstrap-modal').on('hidden.bs.modal', function () {
        pgwSlider.destroy();
        pgwSlider = null;
    });

    $('#bootstrap-modal').model({
        show: true
    });

}

我第一次拨打openModal()时工作正常但是我第二次尝试拨打openModal() ...我的pgwSlider为空，在这里：

    pgwSlider.reload();

这不应该正常发生，因为执行了整个函数openModal()，这意味着pgwSlider再次被实例化。

这是某种内存泄漏吗？

Answer 1

问题在于，每当您致电openModal时，您都会将事件监听器附加到'shown.bs.modal'和'hidden.bs.modal'，因此第二次openModal运行并再次打开相同的模式，它会发射2次'shown.bs.modal'：一次是第一次附着，一次是当前附着;但第一个pgwSlider现在是第一个null

中声明的'shown.bs.modal'

您可以通过两种方式避免这种情况：

使用.one仅将一次附加到事件中 http://api.jquery.com/one/，所以它只触发一次事件监听器

$('#bootstrap-modal').one('shown.bs.modal' ...
$('#bootstrap-modal').one('hidden.bs.modal' ...

或使用.off http://api.jquery.com/off/

分离关闭模式上的侦听器（因为您在引导时只能使用模态）

$('#bootstrap-modal').on('hidden.bs.modal', function () {
    pgwSlider.destroy();
    pgwSlider = null;
    $('#bootstrap-modal').off('hidden.bs.modal')
    $('#bootstrap-modal').off('shown.bs.modal')
});

关于内存泄漏：它是某种内存泄漏，但您可以稍后清理被遗忘的侦听器

$('#bootstrap-modal').off('hidden.bs.modal')
$('#bootstrap-modal').off('shown.bs.modal')

Javascript奇怪的变量在事件函数内变为null

1 个答案: