Question

我有一个内存泄漏，我不明白。我编写了一个机制来处理事件，半自动解除绑定，这可以让我轻松地清理内存。但在一种情况下，清理不会发生（我使用chrome的“profile（内存堆）”来检查“EventHandler”左侧的实例）。我真的不明白为什么会这样。关闭时有些奇怪......

see it in action with chrome

function Bind(obj, f) {
    return function() {
        return f.apply(obj, arguments);
    }
}

function EventHandler() {
    this.listeners = new Object();

    var _listenerID = 0;
    this.addListener = function(e, obj, listener, specialDisplay) {
        if (typeof(listener) === "function") {
            var listenerID = ++_listenerID;
            console.log("Events (" + (++EventHandler.All) + ", " + listenerID + ") ++" + e);

            if (!this.listeners.hasOwnProperty(e)) {
                this.listeners[e] = new Object();
            }
            this.listeners[e][listenerID] = listener;

            if (obj != null && typeof(obj.removeListener) == "function") {
                var deleteListenerID = obj.addListener("Delete", null, Bind(this, function() {
                    this.removeListener(e, listenerID);
                    obj.removeListener("Delete", deleteListenerID);
                }));
            }

            return listenerID;
        }

        return null;
    }
    this.fire = function(e, obj) {
        if (this.listeners.hasOwnProperty(e)) {
            for(var i in this.listeners[e]) {
                this.listeners[e][i](obj);
            }
        }
    }
    this.removeListener = function(e, listenerID) {
        if (this.listeners.hasOwnProperty(e) && this.listeners[e].hasOwnProperty(listenerID)) {
            delete this.listeners[e][listenerID];

            console.log("Events (" + (--EventHandler.All) + ", " + listenerID + ") --" + e);
        }
    }
}

EventHandler.All = 0;

function Loader() {
}

Loader.files = new Object();

Loader.LoadImage = function(src, f) {
    if (!Loader.files.hasOwnProperty(src)) {
        var handler = new EventHandler();

        console.log("Loading.... (" + src + ")");

        Loader.files[src] = function(fnct) {
            handler.addListener("ImageLoaded", handler, function(img) {
                fnct(img);
            });
        }

        handler.addListener("ImageLoaded", handler, function() {
            Loader.files[src] = function(fnct) {
                fnct(img);
            }
        });     

        var img = new Image();
        $(img).load(function() {
            console.log("Loaded.... (" + src + ")");
            handler.fire("ImageLoaded", img);
            handler.fire("Delete");
            $(img).unbind('load');
        });
        img.src = src;
    }

    Loader.files[src](f);
}

Loader.LoadImage("http://serge.snakeman.be/Demo/house.jpg", function() { alert("ok"); });

Answer 1

您可以通过EventHandler变量创建包含对handler实例的引用的闭包。加载图像后，其中一个闭包仍然存在：

    handler.addListener("ImageLoaded", handler, function() {
        Loader.files[src] = function(fnct) {
            fnct(img);
        }
    });

这是内部函数function(fnct) {...。只要闭包存在，就不能释放EventHandler的实例。你唯一的解决方案是摆脱那个关闭。或者，如果可能，您手动释放实例。以下内容可能对您有用：

handler.fire("Delete");
handler = undefined;

Chrome的内存分析器会显示对象的保留树，这只是说“谁持有对象的引用”的另一种方式。在您的示例中，它是 EventHandler ＆lt; - 处理程序（由闭包合并的LoadImage方法的变量）＆lt; - house.jpg ，实际上是Loader.files[src]，其值为function(fnct) { fnct(img); }。

Answer 2

当您添加“侦听器”时，如果您长时间使用该查询，请确保将其删除。

this.listeners = new Object();

或

this.listeners[e] = new Object();

这会将对象作为数组添加到侦听器，但不会在任何时候删除它们。

这可能是记忆消耗的原因。它可能不泄漏，它的对象分配。使用浏览器消耗你的RAM。 :)

Javascript关闭：内存泄漏

2 个答案: