Does each addEventListener require a removeEventListener to prevent memory leak in Appcelerator

Question

If I have a simple alert dialog such as

                  var dialog = Ti.UI.createAlertDialog({
                    cancel: 1,
                    buttonNames: ['OK'],
                    message: 'Here is message.',
                    title: 'Title'
                  });
                  dialog.addEventListener('click', function(e){
                    // do something
                  });
                  dialog.show();
                  dialog = null;

within a window. Let's say I close that window and that window instance is not assigned any variable. The window should be garbage collected. Will 'dialog' eventually be freed during garbage collection or because I never call dialog.removeEventListener it will forever live in memory?

Yurt

Answer 1

In your example you do not need to remove the event listener.

To prevent memory leaks the only thing that you need to do in this case is to make sure you declare var dialog instead of just dialog (which you did well). All the UI elements in local scope within a window will be removed from memory the moment that window is closed. If you declare global references it may cause memory issues.

Now there are cases where you MUST remove event listener and those are the custom event listeners. Adding custom events specially to the Ti.App object and not removing them will cause you a lot of trouble. I usually not recommend to add any but in case you really really need it you should make sure that's removed, also make sure that the event handler is a named function.

Armadillo

well said, i'd add one more thing everybody needs to be aware of : take a look at the functions name : addEventListener, it is not a setEventListener, calling addEventListener multiple times will result in the call back of the event listener being called multiple times, it won't override the previously added Event listener – Precipitin

(I am intimately familiar with ECMAScript and the DOM, but new to Titanium.) What is the “lot of trouble” (memory leaks aside) that one can expect if one does not remove the event listener in those other cases? Why is it important that the event listener is a named function (does Titanium perform function serialization?)? – Preventer

Other than memory leaks you can see odd behaviors in your app, like events triggering multiple times, if those events handle some UI it can block the UI thread. - The named functions are specifically for global custom events, you can have anonymous functions on the supported events and they will get removed when the UI component is not longer used or referenced – Armadillo

I don't think the event handler has to be a named function to use removeEventListener(). If you use an unnamed function, save its value and provide it as an arg to removeEventListener(). Just be sure that the args to removeEventListener() are the same as the args for the matching addEventListener(). – Lody

It is not true that multiple calls to addEventListener will generate multiple event callbacks for the same event! Any previous handlers for the event are deleted automatically. – Lody

@DavidSpector That's only partly correct. Any previous handlers added with the same parameters in the addEventListener() call will be replaced. Any that have different parameters are added to the chain and will each be called. There's also a caveat about doing this with unnamed functions as they are treated as distinct. See for example the "Multiple identical event listeners" section of developer.mozilla.org/en-US/docs/Web/API/EventTarget/… . – Verdha