Javascript怪异变量在事件函数中变为空

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为null，在这里：

    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')