How can i delete javascript Object (John Resig - Simple Inheritance)?

Question

My code:

myobj = new Object();
classes.testegy = Class.extend({
    init: function (token) {
        console.log("test egy");
        setInterval(function () {
            console.log('hello');
        }, 300);
    },
    testt: function () {
        console.log("luli");
    }
});
classes.testketto = Class.extend({
    init: function (token) {
        console.log("test ketto");
    }
});
classes.site = Class.extend({
    init: function (token) {
        var myobj = new Object();
        myobj.lel1 = new classes.testegy();
        myobj.lel2 = new classes.testketto();
        console.log(myobj);
        delete myobj.lel1;
        myobj.lel1.testt();
    }
});
var class = new classes.site();

If I delete the myobj.lel1 object, it will be deleted, but the setInterval goes in the testegy class. Why? How can I full delete Object? Thanks

edited:

some example, when not use setInterval, use click, and console log.

classes.testegy = Class.extend({
init: function(token){
    console.log("test egy");
    $(".piii").live("click", function() {
        console.log("hello");
    });

},
foo: function() {
    console.log("pina");
}
});

classes.testketto = Class.extend({
init: function(token){
    console.log("test ketto");
}   
});

classes.site = Class.extend({
init: function(token){
    var myobj = new Object();

    myobj.lel1 = new classes.testegy();
    myobj.lel2 = new classes.testketto();

    console.log(myobj);

    delete myobj.lel1;
    myobj.lel1 = new classes.testegy();
    delete myobj.lel1;
    myobj.lel1 = new classes.testegy();
    delete myobj.lel1;
    myobj.lel1 = new classes.testegy();

}   
});

return: 1 click event -> 4x click = 4x console log :( it was created 4 shadow object.

Answer 1

You need to define cleaning function. First, hold the reference to setInterval:

init: function(token){
    console.log("test egy");
    this.interval = setInterval(function() { console.log('hello'); }, 300);
}

then define cleaning function (in prototype):

clean: function() {
    clearInterval(this.interval);
}

and finally call myobj.lel1.clean() before deleting.

EDIT

The problem with the edited code is different. Look at this:

init: function(token){
    console.log("test egy");
    $(".piii").live("click", function() {
        console.log("hello");
    });
}

Whenever you initialize new object, this function adds new handler to click event on .piii. What you have to do is to use this code:

$(".piii").live("click", function() {
    console.log("hello");
});

outside an object definition. Or you can use $(".piii").unbind('click').click(/* handler */) inside init.

BTW. .live method is outdated. Use .on now.

Answer 2

If I delete the myobj.lel1 object, it will be deleted, but the setInterval goes in the testegy class. Why?

Because delete operator just remove the reference to the object and then at some moment garbage collector frees the memory where this object resides. While the the only way to remove interval is to use clearInterval method like this:

...
init: function(token){
    console.log("test egy");
    this.interval = setInterval(function() { console.log('hello'); }, 300);
},
...

//then before calling delete you need to call clearInterval
clearInterval(obj.interval);
obj = null;

Or you can incapsulate all cleanup to the separate method:

cleanup: function() {
    clearInterval(this.interval);
}

Answer 3

setInterval returns an identifier for the timer, which can then be put through clearInterval to stop it. You need to call that clearInterval before destroying the object.