memory usage and leaks with repeated ajax calls

Question

I have the following Ajax call which send form data to a page and finds specific response.

$.ajax({
    url: $("form[name='MainForm']").attr('action'),
    data: $("form[name='MainForm']").serialize()+'&btnupdateprice.x=0&btnupdateprice.y=0',
    type: 'POST', 
    cache: false,
    success: function(response) {
        errors = $(response).find("#listOfErrorsSpan");
        result2= $(response).find(".colors_pricebox:eq(0)");
        $(".colors_pricebox:eq(0)").replaceWith(
            '<table width="100%" cellspacing="0"  cellpadding="0" border="0" class="colors_pricebox">' + result2.html() + '</table>');
        $('#listOfErrorsSpan').replaceWith(
            '<span id="listOfErrorsSpan">' + errors.html() + '</span>');
    }
});

Each time the page call this page via Ajax it loads about 74k of data. I do not have a specific programming question but instead would like to know if there is a way or ways to limit the possibility of any leaks or.... in this case, I extract out two areas of the loaded page and store it in variable "error" and variable "result2".

Do I need to do something like destroy, detach or otherwise "remove" the unused data in the response. Is it stored somewhere. Each reload via Ajax does it get overwritten or take up new space. Do or should I need to destroy the error and result 2 variables once they are used since they are no longer needed? Or perhaps I would or should not use the variables to store the result and just do this directly as shown below?

Sorry if I am not making much sense. Not very familiar with this. I would just like to know if there is anything I should be concerned with with regards to leaks. Thanks for any feedback.

$(".colors_pricebox:eq(0)").replaceWith(
    '<table width="100%" cellspacing="0" cellpadding="0" border="0" class="colors_pricebox">' + $(response).find(".colors_pricebox:eq(0)") + '</table>');

$('#listOfErrorsSpan').replaceWith(
    '<span id="listOfErrorsSpan">' + $(response).find("#listOfErrorsSpan").html() + '</span>');

Answer 1

Exactly what is the symptom(s) and on which browser(s)?

JavaScript is a GC-language and objects which are not reachable are removed (reclaimed) as appropriate (this is slightly "catching" as execution contexts are bound upon but...). Unless there is a specific problem, don't worry about it :-) -- I can think of some contrived examples involving execution context with temporary data held onto for far too long, but in practice I have not run into such a case that actually did matter. Jibbering Notes: JavaScript Closures talks about execution contexts and scopes which should cover this potential form of "leak".

If you do run into such a case, you can release references (e.g. x = null) or use the delete keyword. These do not actually "delete" the object (the delete keyword can remove properties), but can (if there are no longer any references) make it eligible for reclamation.

In the code above, it looks like "global" variables (error and result2) are being used, if so (and they are not needed), using local variables may make more objects eligible for reclamation as the local variables will perish with the execution context (thus potentially making the objects they contain eligible for reclamation). However, the next time the callback runs the values will be overwritten which (unless there is another reference held) will make the previous objects eligible for reclamation -- that is, there is no compounding problems. Compare that with:

globalArrayThatIsNeverCleared.push(result2)

There are (or were?) also some IE memory leaks caused by access to objects "outside" the JavaScript GC which resulted in cyclic graphs that could not be freed, etc.