内存泄漏javascript中未使用的事件处理程序

时间:2012-08-23 16:34:34

标签: javascript jquery ajax javascript-events event-handling

我遇到了很多ajax调用来改变html的相同部分的情况。这个html代表一个网格。在更改ajax调用中的html后,我将事件处理程序附加到网格的事件。当用户点击刷新按钮时,我执行相同的ajax调用,设置新的html代码,并再次添加一个事件处理程序来监听网格事件。

我想知道每次刷新我的网格并添加一个新的事件处理程序,如果前一个事件处理程序仍然在内存中,如果是,那么这种情况下的最佳做法是什么? (例如,在放入新的html之前解除绑定事件处理程序)

以下是我所做的一个例子:

$.get(this.config.actionLoggingUserListUrl, viewModel, function (data) {
    MyNamespace.ui.hideGridAnimation($("#LoggingActionUsersList"));

    if (data.success) {
        $("#validationSummary").html("");

        $("#usersList").html(data.result);

        $("#LoggingActionUsersList").click(function() {
            console.log("Here is my event handler attached multiple times!");
        });
    }
    else {
        $("#validationSummary").html(data.result);

        $("#usersList").html("");
    }
});

请注意,我在这种情况下正在讨论的事件处理程序是:

$("#LoggingActionUsersList").click(function() {
   console.log("Here is my event handler attached multiple times!");
});

2 个答案:

答案 0 :(得分:1)

为什么每次拨打电话都要绑定它?

您每次都要添加到堆栈中。你没有替换它。最佳解决方案是使用并执行一次。

其他解决方案是在添加click事件之前取消绑定click事件。此解决方案的问题是,如果其他任何内容添加了click事件,您只需删除它。

答案 1 :(得分:1)

事件处理程序堆栈,所以是的,这是一个memork泄漏。可能是一个相当微不足道的,但它的原则多于效果。除非由于某种原因你确实需要动态事件处理程序(因为它没有很多实际用途而很少使用),我强烈建议将事件处理程序赋值从ajax调用中拉出来。 / p>

如果确实需要更改事件处理程序,那么巧妙的方法就是让你的事件处理程序足够聪明,以便对它所分配的对象有所了解。这样,您可以在事件处理程序中根据对象的当前标识执行不同的操作,而不是每次都添加新事件。