Loading/unloading Javascript dynamically

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 so开发者_运维技巧me 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?

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;