避免内存泄漏会影响事件监听器

时间:2012-11-23 20:17:30

标签: javascript memory-leaks windows-8 winjs

我想知道是否向按钮添加事件监听器,是否必须在unload上删除它?按下“后退”按钮会自动删除当前页面元素,我不需要担心内存泄漏吗?

(function () {
"use strict";
ui.Pages.define("/pages/registraton/registraton.html",{
    ready: function (element, options) {
        document.getElementById("submitRegister").addEventListener(
            "click", postRegistration , false);

    },
    unload: function () {
        document.getElementById("submitRegister").removeEventListener(
       "click", postRegistration, false);
    }
});...

提前致谢。

1 个答案:

答案 0 :(得分:9)

您需要担心WinJS.Navigation名称空间提升的单页导航模型中的内存泄漏。

您设置的模型 - 在哪里实施卸载 - 绝对是正确的方法。多么复杂&你想要获得的深度取决于你的应用程序的复杂性。具体来说,如果您有多个控件,并且有多个手动事件处理程序,您可能需要创建一组帮助程序,以便一次性清理这些处理程序。这可能就像将元素,事件名称和处理程序实例推送到数组中一样简单,当离开该页面并从DOM中销毁/删除它时,您可以烧掉数组,删除需要清理的项目。

请注意,您只需要显式清理处理程序和DOM对象具有不同生命周期的情况。如果他们一起离开 - 例如一个控件附加到页面中的DOM元素,然后你 没有明确地清理所有内容。垃圾收集器最终将清理它。如果你是一个特别重要的内存应用程序,你可以通过更积极地删除监听器来 获得一些胜利。

还有其他一些事情需要记住:

  • 这也适用于实现addEventListener合约的纯javascript对象,即列表视图
  • 不要使用attachEvent - 它会导致不可破坏的循环,因为它的旧实现在封面下。它实际上是一个已弃用的API,因此不应使用
  • 当您尝试解除绑定时,在提供绑定此指针的事件处理程序时要小心。 E.g。

示例:

var element = getInterestingElement();
element.addEventListener("click", this.handleClick.bind(this));

如果你试图分离事件,你就会迷失 - .bind()的返回值在风中丢失,你永远无法解开它:

var element = getInterestingElement();
element.removeEventListener("click", this.handleClick); // Won't remove the listener
element.removeEventListener("click", this.handleClick.bind(this)); // Won't remove, since it's a different function object

这里最好的解决方案是在附加之前将猴子补丁handleClick:     this.handleClick = this.handleClick.bind(this);

或将其存放以备后用:

this.handlerClickToCleanup = this.handleClick.bind(this);
element.addEventListener("click", this.handleClickToCleanup);