Event handling, DOM, closures and memory leaks (again)

[Robert]

Hello javascript group readers,

I have a question regarding how to prevent memory leaks in Internet
Explorer when using closures. I already knew about the circular
reference problem, and until now was able to prevent memory leak
problems. But I needed to store DOM elements and can't solve it
anymore. So I search the group archive to see if I missed any
valuable information. I found some interesting articles, but somehow
could not apply it to my problem or I did not understand it fully.
In particular the articles that talked about setting variables to
NULL seemed as an easy solution, but I think I didn't understand it,
because it didn't seem to work.

So, let me explain my problem in more detail. I am working on some
very dynamic and complex page. It uses AJAX (XMLHttpRequest) to alter
different parts of the page. This already disqualifies the finalize
method solution to cleanup memory leak problems. I use several
"component classes" to do the work of creating DOM elements in some
container element and provide an easy to use interface for
manipulation the content. For example I can call
component.setBackgroundColor("red")
and the component takes care of changing the style on the correct
DOM element that is encapsulated in the component. In reality the
component uses more complex interface method, but I hope you
get the picture of why I do this.

Let me show you some example code:

function MyComponent()
{
var div;
var handler = null;

this.generate = function generate()
{
div = document.createElement("div");
div.onclick = MyComponent.createClickHandler(this);
// normally more elements are created here
return div;
}

this.setBackgroundColor = function setBackgroundColor(value)
{
div.style.backgroundColor = value;
}

this.getHandler = function getHandler()
{
return handler;
}

this.setHandler = function setHandler(value)
{
handler = value;
}

}

MyComponent.createClickHandler = function createClickHandler(component)
{
return function(event)
{
var handler = component.getHandler();
if (handler != null)
handler(event);
}
}

This "component class" can be used like this:

var container = document.getElementById("container");
var component = new MyComponent();
container.appendChild(component.generate());
....
component.setBackgroundColor("red");
component.setHandler(function(event) {alert("Stop touching me!")});

The problem, of course, is that this code will create a memory leak
in Internet Explorer. I need the component in the event handler to
get the handler dynamically, but the div is stored there too,
creating a circular reference.

One of the things I tried doing is making a DOMStorage "class" like
this:

function DOMStorage()
{
var map = new Object();

this.get = function get(id)
{
return map[id];
}

this.put = function put(id, obj)
{
map[id] = obj;
}

}

var storage = new DOMStorage(); //global

Instead of storing the div element directly in the component, I store
it under an id in the DOMStorage and use it to retrieve it later.
This actually prevented the memory leak. I don't really understand
why, because I still see a circular reference. Maybe Internet
Explorer does not count references in the global scope as a circular
reference? When I move the global storage to inside the container
object I get the memory leak again.

Unfortunately I am unable to use a global DOMStorage, because the
"component class" in instantiated many times, and they must all have
their seperate DOM elements.

Perhaps I have to generate unique ID's when I put a DOM element into
the global storage? It seems so over-the-top for something that works
perfectly fine in Firefox.

What are my alternatives?

I hope this post was not too long for you
Thanks in advance for any help you can offer.

Robert.

 

[Robert]

I have a question regarding how to prevent memory leaks in Internet
Explorer when using closures.

Just tried Internet Explorer 7, and quite bewildered that this memory
leak problem still exists.

 

[VK]

Robert wrote:

div.onclick = MyComponent.createClickHandler(this);

MyComponent.createClickHandler = function createClickHandler(component)
{
return function(event)
{
var handler = component.getHandler();
if (handler != null)
handler(event);
}
}

Well, that the good ol' classic of circular reference leaks. I guess
the JScript engine's author will explain it better than I would:
<http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx>
(search for your code sample in the 2nd half of the article)


P.S. That is the actual purpose to have a separate custom method to
attach event listeners if you already have ready to use event handlers
in the DOM object?
I maybe (and well possibly) missing something here, but it looks
similar to use a function returning true instead of simply assigning
true value itself.