Question

我在AJAX导航方面遇到了麻烦，问题是加载的javascript文件在加载新内容后仍保留在浏览器中，即使它们不再位于DOM中，它们在浏览器控制台中显示为VM文件，并在其中执行代码。我不希望发生这种情况，因为当新内容通过AJAX到达时应该替换的javascript文件。

我的DOM结构是这样的：

<body>
    <header></header>

    <main id="contentToBeReplaced">

        <p>New content with its own js</p>
        <script>
            var script = "js/new.js";
            $.getScript(script);
        </script>
    </main>

    <footer></footer>

    <script src="js/main.js"></script>
</body>

每次用自己的javascript文件加载页面时，都会出现一个新的VM文件并保留所有旧文件，这就是一个问题：

那么，问题出在哪里，我该如何解决？我需要防止重复文件，并在加载新的js文件时将其删除。

Answer 1

Javascript全局执行上下文中的每个唯一条目只能代表一个对象或变量。将相同功能重复加载到全局上下文将一次又一次替换功能代码。

您应该以这种方式管理要延迟加载的脚本，使其在全局上下文（或您使用的框架）中代表相同的条目

请查看以下示例js代码，这些代码假定在两个不同的时间被延迟加载

//script 1

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



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

现在，如果您加载一个脚本并执行dynFun()，它将注销"Loaded early"。现在，此时，如果您加载第二个脚本并再次执行dynFun()，它将注销"Loaded late"。

但是，如果这些功能中的每一个都启动setTimeout之类的自动过程，它们将继续起作用，直到关闭页面。

在这种情况下，您的动态脚本应首先进行一些清理。

var timeTracker;   //This is global

var dynFun = function() {
                  if (timeTracker)
                      clearTimeout(timeTracker)

                   timeTracker = setTimeout(someFn, 1000)   
             {

请记住-您无法决定以垃圾收集语言（如JS）分配内存。您只能通过操纵对对象的引用来欺骗清理过程。

Answer 2

在“ new.js”文件的开头添加此文件，以在Chrome开发工具中跟踪该文件：

//# sourceURL=new.js

Answer 3

在JavaScript文件顶部添加'use strict';，它将启用更严格的JavaScript解析模式，以防止意外的全局变量。如果这样做没有帮助，您可以在本文"4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them"

中阅读有关“垃圾收集器”的更多信息

Answer 4

经过大量研究，我能够解决问题。据我所知，没有绝对的方法来"unload" JavaScript文件而不刷新页面，或者以编程方式清理内存浏览器的缓存。
由于这些动态javascript文件中的大多数代码都与事件函数相关，因此我将事件绑定到document而不是使用以下语法绑定到每个元素：

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

});

由于这个原因，每次加载javascript文件时，事件都会一遍又一遍地绑定，并从VM files开始执行多次。当您从DOM中删除元素时，他的绑定事件也会被删除，除非像我一样绑定到document上。因此，我更改了on()方法以将事件直接绑定到元素：

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

});

此更改之后，我的问题消失了，因为我用AJAX替换的html部分用其events删除了该元素，而无需使用off()来手动删除绑定的事件，也应将要在多个页面中执行的主要函数放在主要的js中。
但是，@CharlieH在他的回答中很有意义。

Javascript文件在Ajax导航中显示为重复

4 个答案: