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

javascript中未使用事件处理程序的内存泄漏,javascript,jquery,ajax,javascript-events,event-handling,Javascript,Jquery,Ajax,Javascript Events,Event Handling,我遇到的情况是,我进行了大量ajax调用来更改html的相同部分。这个html表示一个网格。在ajax调用中更改html之后,我将事件处理程序附加到网格的事件。当用户单击刷新按钮时,我执行设置新html代码的相同ajax调用,并再次添加事件处理程序来监听网格的事件 我想知道,如果每次刷新网格并添加新的事件处理程序时,前一个事件处理程序是否仍在内存中,如果是,在这种情况下最好的做法是什么?(例如,在放置新html之前,如果存在事件处理程序,请取消绑定) 下面是我所做工作的一个例子: $.get(t

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

我想知道,如果每次刷新网格并添加新的事件处理程序时,前一个事件处理程序是否仍在内存中,如果是,在这种情况下最好的做法是什么?(例如,在放置新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!");
});

你为什么每次打电话都要把它绑起来

每次都要添加到堆栈中。你不能替换它。最好的解决办法是在上使用并执行一次


另一种解决方案是在添加click事件之前解除click事件的绑定。此解决方案的问题是,如果有任何其他内容添加了单击事件,您只需将其删除。

事件处理程序堆栈,因此是的,这是一个内存泄漏。可能是一个相当微不足道的问题,但它更多的是原则而不是效果。除非出于某种原因,您真的需要动态事件处理程序(由于没有太多实际用途,所以很少使用),否则我强烈建议将事件处理程序分配从ajax调用中删除


如果确实需要更改事件处理程序,聪明的方法是使事件处理程序足够智能,以便对分配给它的对象有一点了解。这样,您就可以让事件处理程序中的逻辑根据对象的当前标识执行不同的操作,而不是每次添加新事件

每次代码运行时,您肯定会向已经存在的事件处理程序添加一个新的事件处理程序。您可以使用“unbind”解除绑定,或者只需跟踪处理程序是否已绑定。jQuery
.html()
会隐式地从被
.html()
替换的元素中清除任何(jQuery)-处理程序和(jQuery)-数据。因此,如果要将处理程序附加到的元素被上述
.html()
调用替换,则不需要显式分离它。这也可以用于清除堆栈,这是一个简单的更改:
$(“#LoggingActionUsersList”)。取消绑定()。单击(…)
“因为它没有太多实际用途”无论何时附加一个接受参数的事件处理程序,都必须将参数包装到函数中,不是吗?除了从
此值获取所有动态信息之外,还有其他解决方案吗?