Memory_issues Calling removeEventListener or removing all re

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

Memory_issues Calling removeEventListener or removing all re

Post by daniel302 »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by lithopsian »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by ake79 »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by max1million »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by daniel302 »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by ake79 »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by daniel302 »

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

Re: Memory_issues Calling removeEventListener or removing al

Post by ake79 »

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: 21
Joined: May 5th, 2014, 6:06 am

Re: Memory_issues Calling removeEventListener or removing al

Post by david835 »

(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.
Post Reply