Javascript Files Appears Duplicated In Ajax Navigation

I´m having troubles with AJAX navigation, the problem is that the javascript files loaded remains in the browser after the new content is loaded even they aren't in the DOM anymor

Solution 1:

Each unique entry in Javascript global execution context can only represent a single object or a variable. The repeated loading of the same function to the global context will replace the function code again and again.

You should manage the scripts being lazy-loaded in such a way that they represent the same entry in your global context (or the framework you use)

Look at the following sample js codes which are assumed to be lazy loaded at two different times

//script 1var dynFun = function() {
                console.log('Loaded early');
             {



//script 2var dynFun = function() {
                console.log('Loaded late');
             {

Now if you load the script one and execute dynFun(), it will log out "Loaded early". Now, at this point, if you load second script and execute dynFun() again, it will log out "Loaded late" .

However, if each of these functions initiate automatic processes like setTimeout, they will continue to function until the page is closed.

In such occasions, your dynamic scripts should first do some clean up first.

var timeTracker;   //This is globalvar dynFun = function() {
                  if (timeTracker)
                      clearTimeout(timeTracker)

                   timeTracker = setTimeout(someFn, 1000)   
             {

Remember - you cannot get to decide deallocation of memory in garbage-collected languages like JS. You can only trick the clean up process by manipulating references to the objects.

Solution 2:

After many research I was able to solve the problem. As far I know there is no absolutely way to "unload" javascript files without refresh the page, or clean the cache of memory browser programmatically. Since most of my code inside these dynamic javascript files are related to events functions, I was binding events to the document instead of each element with this syntax:

$(document).on("click", "#myElement", function () {

});

For this reason every time the javascript file was loaded the events were binded over and over, and executed multiple times from the VM files. When you remove an element from the DOM, his binded event it´s also removed, unless is binded to document like mine. So I changed the on() method to bind the event directly to the element:

$("#myElement").on("click", function() {

});

After this change my problem has gone because the portion of html I replace with AJAX removes that elements with its events, without the need of use off() to manually remove the binded events, also main functions that will be executed in multiple pages should be placed in the main js. However, @CharlieH makes a good point in his answer.

Solution 3:

Add this at the begining of the "new.js" file to track that file in Chrome Dev Tools:

//# sourceURL=new.js

Solution 4:

Add 'use strict'; at the top of you JavaScript file it will enable a stricter mode of parsing JavaScript that prevents accidental globals. if it doesn't help you can read more about "garbage collector" in this article "4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them"