Javascript clearing objects from memory after AJAX load

Question

I am implementing a single page application.

I have a container div (<div id="container"/>), where i load html content using AJAX.

// function that is overwritten by loadMenu functions
// and gets called before loading a new section 
function unbindPreviousSection() { };

// load contacts
function loadContactsMenu() {
    unbindPreviousSection();
    unbindPreviousSection = function () { };

    $.get("/Home/Contacts", function (data, status) {
        if (status === "success") {
            $("#content").html(data);
            contactsMenu.bind();
            unbindPreviousSection = contactsMenu.unbind;
        }
    });
};

// load profile
function loadProfileMenu() {
    unbindPreviousSection();
    unbindPreviousSection = function () { };

    $.get("/Home/Profile", function (data, status) {
        if (status === "success") {
            $("#content").html(data);
            unbindPreviousSection = function() {
                // specific unbind methods for this menu
            };
        }
    });
};

var contactsMenu = {};
(function () {
    var viewModel = null;

    contactsMenu.bind = function () {
        viewModel = {
            phones: ko.observableArray()
        };
    };

    contactsMenu.addPhone = function (phone) {
        viewModel.phones.push(phone);
    };

    contactsMenu.unbind = function () {
        viewModel = null;
    };
}());

Inside any menu load function, i internally call unbind method of the previous loaded menu.

loadContactsMenu();
loadProfileMenu();  // internally calls contactsMenu.unbind();

Before i load any data, i call unbindPreviousSection() function to dispose the previous menu data.

My question is:

Is viewModel variable inside contactsMenu object still persisting after i call contactsMenu.unbind() even if i set it to null? (does it creates memory leaks?)

Does contactsMenu.addPhone function creates a closure which saves in memory viewModel variable (because is used inside the function)?

alehro · Accepted Answer · 2013-07-05 21:15:16Z

1

Variable viewModel is just a reference to object. After you set viewModel to null the object it's referencing becomes eligible to garbage collection (i.e. becomes not persisting), unless you have other references to the object.
Closures hold objects in memory only until the owner function is running. In other words, Closure starts referencing it's objects at the start and releases references at the end. Regarding addPhone function it means that practically it doesn't keep viewModel's object in memory.

I'd recommend to use Chrome profiler to check this and any further memory leak problems. You can take memory snapshot there and see for every object who is holding it in memory.

answered Jul 5, 2013 at 21:15

alehro

2,1982 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript clearing objects from memory after AJAX load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related