MozillaZine

Memory_issues Calling removeEventListener or removing all re

Talk about add-ons and extension development.
daniel302
 
Posts: 23
Joined: July 13th, 2010, 11:41 pm

Post Posted October 30th, 2010, 8:42 am

hi

https://developer.mozilla.org/en/DOM/el ... ory_issues

The MDC says that this is wrong:
A common way for one to stumble upon increasing memory problems is to pass an object's method as a callback:
Code: Select all
document.addEventListener("load", obj.func, false); // sets wrong |this|! 


and the correct way is:
Code: Select all
document.addEventListener("load", function(event) { obj.func(event); }, false); 


I need how to Call removeEventListener or removing all references to an anonymous function

this doesnt work to me:
document.removeEventListener("load", function(event) { obj.func(event); }, false);

#-o

lithopsian
 
Posts: 3664
Joined: September 15th, 2010, 9:03 am

Post Posted October 30th, 2010, 3:50 pm

You can remove a listener with an anonymous function in the way you show. I suspect your problem is the location of the removeEventListener statement. Is it inside obj? The best location is in obj.func, assuming that this event is only needed once.

Are you getting an exception in the console? Something worse?

ake79
 
Posts: 1344
Joined: February 17th, 2007, 6:05 am

Post Posted October 30th, 2010, 10:54 pm

The remove doesn't work because the function that you are removing is not the same as the one you added. You need to keep a reference to your listener function if you want to remove it later.

https://developer.mozilla.org/en/DOM/el ... er#Example

And as for mdc saying that the first way is wrong and the second one is correct, it's a bit misleading in that context. Wrongness there has nothing to do with memory issues, but with the fact that |this| is "wrong", which usually is not what is wanted.
My extensions: Save File to | ThumbsDown

max1million
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted October 31st, 2010, 7:08 am

It was more then misleading. The this object available within a method is set by the caller and is often not the object the method belongs to. Not really the wrong object just not the one you might think it should be. Every function is a method of an object even if the object is not stated, in which case it is a method of the current window object. Example: alert() and window.alert() are the same.

Memory issues
document.addEventListener("load", function(event) { obj.func(event); }, false);

Calling addEventListener to an anonymous function creates a new listener each time. Calling removeEventListener to an anonymous function has no effect. An anonymous function creates a unique object each time is is called, it is not a reference to an existing object though it may call one. When adding an event listener in this manner be sure it is added only once, it is permanent (can not be removed) untill the object it was added to is destroyed.

daniel302
 
Posts: 23
Joined: July 13th, 2010, 11:41 pm

Post Posted October 31st, 2010, 8:32 pm

var obj = {};
obj.func = function(){ }
document.addEventListener("load", function(event) { obj.func(event); }, false);
document.removeEventListener("load", function(event) { obj.func(event); }, false); //doesnt work
-------------------------------------------------------------------------------------------

finally i changed the style of the code (classic method of javascript functions):

function obj_func(e){}

document.addEventListener("load", obj_func, false);//no memory leak
document.removeEventListener("load", obj_func, false); //works


PD: if someone have the removeEventListener of an anonymous calling an object, post it.

ake79
 
Posts: 1344
Joined: February 17th, 2007, 6:05 am

Post Posted November 1st, 2010, 8:34 am

daniel302 wrote:if someone have the removeEventListener of an anonymous calling an object, post it.

Do you mean that you are still looking for an example how removeEventListener() and anonymous functions work together? If so, read again my previous post and the example I linked to.
My extensions: Save File to | ThumbsDown

daniel302
 
Posts: 23
Joined: July 13th, 2010, 11:41 pm

Post Posted November 2nd, 2010, 6:58 am

ake79 wrote:
daniel302 wrote:if someone have the removeEventListener of an anonymous calling an object, post it.

Do you mean that you are still looking for an example how removeEventListener() and anonymous functions work together? If so, read again my previous post and the example I linked to.



the example shows a var, the listener calling a var, but not an object like this:


var obj = {};
obj.func = function(){ }

document.addEventListener("load", function(event) { obj.func(event); }, false);
document.removeEventListener("load", function(event) { obj.func(event); }, false); //doesnt work


if i use the example, it makes memory leak

Code: Select all
/*
var listener = function (event) {
  /* do something here */
};
*/
var  listener = {};
 listener.func = function (event) {/* do something here */}
div.addEventListener('click', listener.func, false);//memory leak, calling an object
div.removeEventListener('click', listener.func, false);//works, but the listener leaks

ake79
 
Posts: 1344
Joined: February 17th, 2007, 6:05 am

Post Posted November 2nd, 2010, 7:17 am

The example doesn't leak.

Code: Select all
var myExtension = {
  hello: "Hello World!",
  sayHello: function() { alert(this.hello); }
}

// and now copy paste from the example
var div = document.getElementById('div');
var listener = function(event) { myExtension.sayHello(); };
div.addEventListener('click', listener, false);
...
div.removeEventListener('click', listener, false);
My extensions: Save File to | ThumbsDown

david835
 
Posts: 12
Joined: May 5th, 2014, 6:06 am

Post Posted January 22nd, 2019, 7:26 am

(Technical detail) Someone said above, "Calling addEventListener to an anonymous function creates a new listener each time." If this was ever true, it is no longer true. The documentation says, "If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded." So if addEventListener is called multiple times with the same callback function (anonymous or named), only the last call has an effect. Note: to call multiple times with the same anonymous function, save the function in a variable and use the variable. If you simply copy the anonymous function definition, a new function is created and referenced, and so a new listener is indeed added.

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 4 guests