Loading/unloading Javascript dynamically

Question

We are creating a dynamic web application where only some parts of the web page will get loaded/unloaded/reloaded through JQuery AJAX.

But we are concerned what will happen if user runs our application for a long time (some hours) without completely refreshing the web page.

For example, we have a game with modules Map, Shop, Fight. The page also has some modules which are loaded at the beginning (like header with stats and a chat). But all the navigation and changes occur mostly in the center using AJAX. Let's say, user does the following:

goes to Map goes to Shop goes to Fight goes to Shop goes to Map ...

As Map, Shop, Fight have their own separate Javascript files which get loaded on each request (I guess, mostly from the browser cache), what will happen with the memory usage? Do we need to clean up Map variables and event handlers when user "navigates away" from Map? Will there be any conflicts with old Map scripts when the user navigates to Map for the second time? If we don't do some cleanup on unloading, will the browser start using more and more RAM so finally user will be forced to reload the page anyway?

Are there any reliable techniques for dealing with such situations?

Answer 1

If you bind all of the functions to some object you can free the object with all the functions any time you want. For example:

function badFunction(a,b,c) {
 alert("Bad example of function. Can't cleanup this.";
}
var gameObject = new Object();
gameObject.goodFunction = function (a,b,c) {
 alert("Good example of a function");
}
//Here the whole gameObject 'module' will be allowed to be garbage collected (hopefully).
gameObject = null;

• r3wt: what about the events created in it?
• bezmax: @r3wt You have to manage your events manually, JS has no way to know which events need to be deleted and which not. One of the easiest ways to do it would be creating some array, like gameObject.createdEvents = [], push newly created events there, then define a function gameObject.cleanup(), which goes through all events and unregisters them.