Leaky Leaky IE Baby

This story is a direct stumble from my random nosing around into other people's work. There is a team in office which was facing memory leaks in IE in some random scenario involving modal boxes and ajax refresh of sections...well something like that.
Well the nosing trait that am so so proud of made me pull out a script for modal dialog boxes in a screen and try to see what my script does in a stand alone way. So out came my coding hands and opened up the lines to make a set of new lines to rip upon some random modal trip. (An array of bad jokes .. bear on...)


Anyways turns out my script sucked. I was creating a memory leak of approximately 9 kb with every cycle of display and close of a modal dialog. Ahem ....Ahem....Not good. You can see the script in the attached link in modal.js. Run the demo in IE from the index.html file. I am using IE 7 for this test JFYI.


Now a bit of research and a bit of more nosing around and some head banging on my CPU I came up with another script (modified version ) of the same. This script has almost nil memory leaks. Not that I could notice any.
Now the changes in the script - This post is incomplete without listing down what I learnt/changed :)

How I was binding events?

I used to bind events using jQuery as

            $('div .closeLink').bind('click',function(e){

                         that.closePopup();

                         return false;

                   });

I changed it to happen as 

            $('div .closeLink').bind('click', {thatRef : this},this.closeButton);

This is an attempted inference from a scenario I came across here

For a scenario as 

function loadMyPage() {
   var elem = document.getElementById('myelement');
   elem.onclick = function () {
      window.alert('hi!');
   };
}

You can ....

function onMyElemClick() {
   window.alert('hi!');
}
function loadMyPage() {
   var elem = document.getElementById('myelement');
   elem.onclick = onMyElemClick;
}

What I removed ?

I removed the fadeIn() when I displayed the modal dialog. It was just plain over head as I could not pass back data to my callBack method of fadeIn().

How I was removing DOM?

I was using jQuery in this page and was removing all elements in the screen using the remove() from jQuery as

$('#mainOverlay').remove();
$('.overlayMessage').remove();

I wasn't sure whether jQuery was removing all events on the Child Nodes of the DOM it was removing. So just to  be sure from my side I did it myself.

$('div .closeLink').unbind('click',this.closeButton)

I tried to figure out what jQuery was trying to do in the remove() it exposed but then I was too lazy for some odd reason as usual. But there is code for handling expando and memory leaks in there. You can check for your self.

And here is the link for this coding exercise. TAAADAAAA!!!! 

The code which came around was free from memory leaks. Run the index.html with modal.js to see it leak like a baby without boob access and run the index_new.html with modal_new.js to see it rockin over!!!

Cheers..... Ciao!!