Example Of A Memory Leak
Here's a code sample to consider, it is contrived but bear with me:
function someFn(){
var $input = $("<input type='button' />");
$input.appendTo("body");
window.addEventListener('click', function(){
if($input.val() == ""){
// some code goes here
}
}, false);
}
If you were to remove $input from the DOM, it would not get garbage collected because the callback for the listener has a handle on it.
Likewise, be careful if you do something like this:
function someFn(){
var $someDiv = $("#someDiv");
window.addEventListener('click', function(){
if($someDiv.is(':hidden')){
// some code goes here
}
}, false);
}
In this case, if you ever removed $someDiv from the DOM, it would not be garbage collected. So this may be a better solution:
function someFn(){
var $someDiv = $("#someDiv");
window.addEventListener('click', function(){
if($("#someDiv").is(':hidden')){
// some code goes here
}
}, false);
}
In the past I would have taken the previous route because I always tried to reduce the amount of times I wrapped something in jQuery, but now I'll have to be careful about what my code is doing. If I never intend to remove $someDiv, then maybe the previous sample is OK, but if there is a possibility that I remove it, then the last sample will avoid a memory leak.