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

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

javascript jquery ajax browser

Javascript文件在ajax导航中显示为重复,javascript,jquery,ajax,browser,duplicates,Javascript,Jquery,Ajax,Browser,Duplicates,我在AJAX导航方面遇到了问题，问题是加载的javascript文件在加载新内容后仍保留在浏览器中，即使它们不再位于DOM中，它们在浏览器控制台中显示为VM文件，并在其中执行代码。我不希望发生这种情况，因为当新内容通过AJAX提供时，它应该被替换的javascript文件我的DOM结构如下所示： <body> <header></header> <main id="contentToBeReplaced"> &

我在

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>


具有自己js的新内容
var script=“js/new.js”；
$.getScript（脚本）；

每次页面加载自己的javascript文件时，都会出现一个新的

VM

文件并保留所有旧文件，这是一个问题：

那么，问题是什么？我该如何解决？我需要防止重复文件，并在加载新文件时删除js文件。

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

//# sourceURL=new.js

添加

“使用严格”

在JavaScript文件的顶部，它将启用更严格的JavaScript解析模式，以防止意外全局调用。如果没有帮助，您可以阅读本文中关于“垃圾收集器”的更多信息

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

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

看看下面的示例js代码，假设它们在两个不同的时间延迟加载

//script 1

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



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

现在，如果加载脚本one并执行

dynFun（）

，它将注销

“早加载”

。现在，如果加载第二个脚本并再次执行

dynFun（）

，它将注销

“Loaded late”

但是，如果这些函数中的每一个都启动自动过程，如

setTimeout

，则它们将继续工作，直到页面关闭

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

var timeTracker;   //This is global

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

                   timeTracker = setTimeout(someFn, 1000)   
             {

记住——在像JS这样的垃圾收集语言中，您无法决定内存的释放。你只能通过操纵对对象的引用来欺骗清理过程。

经过多次研究，我终于解决了这个问题。据我所知，如果不刷新页面或以编程方式清理内存浏览器的缓存，就无法完全“卸载”javascript文件。
由于这些动态javascript文件中的大多数代码都与事件函数相关，因此我将事件绑定到

文档

，而不是使用以下语法绑定每个元素：

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

});

因此，每次加载javascript文件时，事件都会被一次又一次地绑定，并从

VM文件执行多次。当你从DOM中删除一个元素时，他的绑定事件也会被删除，除非像我一样绑定到文档。因此，我更改了on（）
方法，将事件直接绑定到元素：
$("#myElement").on("click", function() {

});

在这次更改之后，我的问题消失了，因为我用AJAX
替换的html部分删除了带有事件的元素，而不需要使用off（）
手动删除绑定的事件，而且将在多个页面中执行的主要功能也应该放在主js中。
但是，他的回答很有道理。
看看我通常做的是给我最新的JavaScript文件提供一个版本号。例如：js/new.js？v=1。。。所以，下次我用js/new.js生成时？v=2。。因此，您可以返回js文件的完整url，版本为代码，而不是在脚本中使用var，并从代码中加载js文件内容。您是否可以确认旧代码正在执行，或者Chrome DevTools只是在以前的虚拟机实例中向您显示代码？如果是第二种情况，实际上没有问题，您只需要更改devtools设置（如果有这样的设置），点击x按钮，或者忽略它们。@SilverSurfer您是如何确定VM中的每个脚本都在执行的？谢谢您的回答，我不理解你的第二个例子，关于使用setTimeout
@SilverSurfer进行清理，想象一下第一次加载的函数do setTimeout执行特定任务。现在，此任务正在定期运行。最终，您的第二次加载具有相同的功能，执行任务的方式略有不同。为了防止两个几乎相似的任务运行，您必须从第一次加载时取消函数安装的超时。我发现了我面临的问题，但是我给您投票支持您的答案。无论如何谢谢//您的动态脚本应该首先进行一些清理。