Variable life with JavaScript function closures for events

Question

If I assign an anonymous function to an element's event in a function then the event will have access to the "environment" of the function, even after the function is done.

What happens if I change the element's event function? Does that previous "environment" get garbage collected or is it still in memory?

Or what happens if I remove the element from the DOM?

function blah(div)
{
    var a = 1;
    div.onclick = function(){ alert(a); }; // this alerts 1 as expected because a is in the "environment" of the onclick function
}

blah(someElement);

// somewhere else
someElement.onclick = function()
{
    // i know a is inaccessible here but what happened to it? is it still in memory somewhere?
}

// and what about here?
someElement.parentNode.removeChild(someElement);

Vlad DX · Accepted Answer · 2015-07-11 20:07:10Z

1

Note:

You will want to avoid attaching js objects to a dom node. It will use more memory and will have to be removed individually. A much better way would be to create a js object and then reference the dom node. As always remember to clean up the js objects/events first before removing the dom nodes. Javascript's Garbage Collector is able to detect circular references and handle them correctly, but the DOM's Garbage Collector can not.

This post describes that case: https://www.interworks.com/blog/mgardner/2009/08/31/avoiding-memory-leaks-and-javascript-best-practices

Referencing a variable outside the scope of a DOM element's event function (formally known as a closure see http://www.jibbering.com/faq/faq_notes/closures.html for more information). The problem is that the variable and function become intertwined due to the reference and will not be collected unless both are freed (won't happen until page unload for global variable references). If the event is never removed/released the garbage collector will never collect both the object and the DOM fully.

Will Leak Example:

var bigString = new Array(1000).join(new Array(2000).join("XXXXX")); 
var d = document.createElement("div");
d.onclick = function() {
   this.innerHTML = bigString.length;
};
document.body.appendChild(d);
d.parentNode.removeChild(d);

Will Not Leak Example:

var bigString = new Array(1000).join(new Array(2000).join("XXXXX")); 
var d = document.createElement("div");
d.onclick = function() {
  this.innerHTML = bigString.length;
};
document.body.appendChild(d);
bigString = null;
d.onclick = null;
d.parentNode.removeChild(d);

answered Jul 11, 2015 at 20:07

Vlad DX

4,81821 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IMTheNachoMan Over a year ago

what about attaching events to elements that are already in the DOM like in my example?

Vlad DX Over a year ago

It doesn't matter I think. There is no difference in this case what goes first: binding to an event or adding element to DOM.

Collectives™ on Stack Overflow

Variable life with JavaScript function closures for events

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related