Sunday, June 2, 2024
 Popular · Latest · Hot · Upcoming
101
rated 0 times [  102] [ 1]  / answers: 1 / hits: 47649  / 15 Years ago, fri, october 30, 2009, 12:00:00

Is there anyone who knows how to destroy a javascript (jquery) function?
I'm using jquery selectable and a function call edit is fired on selectable stop event.



Inside this edit function I have nested switch functions with a lot of click events
and I have many functions within each click event. My problem is,
every time I fire the selectable functions and events inside the function edit is fired again but the previous functions and events still exist.
What i do now is to unbind every event in the function edit on selectable start even.



Is this a memory leak problem?
and is there a way to destroy functions in javascript?
i have tried to declare the function to null when the function ends but this does not work. functions and events inside it still exist.



anyone have a clue?



demo page here -->
http://dreamerscorp.com/test/test01/javascript_destory_test.html



edit 2009/10/31
:) thanks a lot for your helps, your comments are very useful to me, thanks again!!!


More From » jquery

 Answers
1

Basically you need to remove all references to those functions so that the JavaScript garbage collector can collect them. If they are bound, you need to unbind them. If there are other variables in there that point to them, they need to be set to null.



It might help if you posted some code; then we can give a better answer.



...EDIT:



What's happening here is, you're creating a closure that will outlive the containing function:



    function edit(){
$('.edit').click(function(){
//...
function _edit(boxTitle,selectedItemAmount){
//...
$('#box .yes').click(function(){
alert(boxTitle + ' for ' + selectedItemAmount + ' selected item');
$('#msg').hide(); // hide msg box when yes btn is clicked
});
}
//...
$('#box .no').click(function(){
$('#msg').hide();
});
});


In other words, inside a function, you're saying, Attach this function to a DOM object, and you're doing it inline. JavaScript captures variables from outer contexts and keeps them alive while the reference to the inner context is alive.



What you need to do is to define the functions somewhere not inline and then use them:



    function boxClickYes(e) {
alert(e.data.boxTitle + ' for ' + e.data.selectedItemAmount +
' selected item');
$('#msg').hide(); // hide msg box when yes btn is clicked
}
function boxClickNo(e) {
$('#msg').hide();
}
function edit(){
$('.edit').click(function(){
//...
function _edit(boxTitle,selectedItemAmount){
//...
$('#box .yes').bind(click, {boxTitle: boxTitle,
selectedItemAmount: selectedItemAmount}, boxClickYes);
}
//...
$('#box .no').click(boxClickNo);
});


This also demonstrates how to use the data property in jQuery click handlers to store data in between the time you attach the handler and the time you use it (instead of storing that data in a closure that will keep the scope chain in memory). Using inline-defined functions is fine when you're just using it right there (like the body of a $.each, for instance) but it's not OK when you're attaching event handlers.


[#98417] Tuesday, October 27, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
leilanichasel

Total Points: 224
Total Questions: 112
Total Answers: 94

Location: Angola
Member since Wed, Apr 13, 2022
2 Years ago
;