Memory is always growing when attaching am event. Even if I destroy everything.

[jose maria Cano]

Hi all, 

I have this test code:

var ews = {};

(function (ews) {

    function testFunction1(a) {

        var num = a;

        return function(b){   

            return num = addOne(num);

        } 

    }

    function addOne(a){

        a++

        return a;

    }

    ews.publicFunction = testFunction1;

})(ews);

function start(){

    var number = ews.publicFunction(5);

    var result = number(6);

    var element = new Element('span', { 'id': 'testSpan', 'class': 'test' }).insert('stop:_' + result);

    ews.eventElement = element.on('click', eventFunc.bind(element));

    $('container').insert(element);

}

function eventFunc(event,element) {

    ews.eventElement.stop();

    ews.eventElement = null;

    element.purge();

    element.remove();

    element = null;

    delete (element);

}

As you can see I'm creating a simple HTML span, adding an event to it and inserting the span to my HTML body.

Before clicking IE8 keeps 49.664 Kb

Normally after clicking I'm removing everything, the element and the event but the memory grows instead of going down!!

After clicking IE8 keeps 49.800 Kb

It's a small difference but I still can't understand why after destroying everything the memory grows. Also, in my real application I have thousands of events so I have thousands of Kb growing and growing every time a user clicks.

Thanks a lot for your time and help.

Kr, Jose

[Victor]

What is 

var result = number(6);

Also why you use

eventFunc.bind(element)

that's nonsense - you can always retrieve element from your event.

Is memory growing constantly by 136Kb for each invocation of start()? In other words, if you calling start() 100 times, will your browser use 62Mb?

Also make please short test example on jsfiddle.net.

[Victor]

http://jsfiddle.net/TnBfr/ - tested in sIEve - somewhere stays reference to SPAN.

http://jsfiddle.net/TnBfr/5/ - no leak in sIEve