Question

在我正在处理的网站中，内容加载了Ajax以及任何包含的JavaScript。我这样做是因为所有页面布局相同，但只有内容不同。

问题在于＆＃34;内容＆＃34;它有JavaScript，我担心即使加载了新内容后脚本也会继续执行。所以我做了这个测试以确保。

首先加载2个其他页面的主页：

<script src="scripts/jquery.min.js"></script>

<script>

function loadPage1(){

var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {

                    response = xhttp.responseText;                  
                    $("#content").remove();
                    $("#mainContent").append(response);
                }
            };


            xhttp.open("GET", "page1.html", true);
            xhttp.send();


}



function loadPage2(){


var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {

                    response = xhttp.responseText;                  
                    $("#content").remove();
                    $("#mainContent").append(response);
                }
            };


            xhttp.open("GET", "page2.html", true);
            xhttp.send();

}


</script>


<button onclick="loadPage1()">Load page 1</button>

<button onclick="loadPage2()">Load page 2</button>

<div id="mainContent">
</div>

然后是带有JavaScript内容的2个页面，基本上只是用＆＃34;我是页面x＆＃34;每一秒。

第1页：

<div id="content">
<h1>Page 1</h1>



<script type="text/javascript">

    setInterval(function(){

console.log("I am page 1");

    },1000);
</script>

</div>

第2页：

<div id="content">
<h1>Page 2</h1>



<script type="text/javascript">

    setInterval(function(){

console.log("I am page 2");

    },1000);
</script>

</div>

Ajax加载正常，我可以看到h1从Page 1更改为Page 2。但是在控制台中，我可以看到即使在内容被删除后，第一个脚本仍然是垃圾邮件。

有没有办法防止这种行为？最好将每个脚本保存在适当的位置，而不是将所有脚本移动到主页面上。

编辑：为避免混淆，setInterval()不是主要问题，它只是一个例子。我问你如何处理Ajax和JavaScript这样的问题

Answer 1

即使第一个<script>块已被替换，您也会看到控制台日志，因为javascript的工作方式。

您的匿名功能

function(){
    console.log("I am page 1");
}

将继续执行并继续执行，直到您拨打clearInterval或离开此页面。

添加点击处理程序（例如$('#some_button').on("click",function(evt){/*do something*/});

）也是如此

即使您声明了变量，例如<script>var x='data1';</script> 然后删除封闭的<script>代码，变量x将继续存在。

在这两种情况下，对函数和变量的引用都存储在某处。事件处理程序保存对setInterval和click处理函数的引用。 A reference to any var and function you declare is held in the window object（除非您使用closure）。

在新加载的脚本中，您可以重新分配内容：函数的行为将是最后加载的行为。对该函数的任何调用都将执行新指令，因为它们现在也已分配给窗口对象（范围）。

总之，

您需要清除间隔
您声明的函数和变量将存在，直到您更改它们

回复：评论中的问题

哦，所以如果我为一个函数声明一个新行为，它就不会像静态编程语言那样给我一个错误。如果我能保持同样的话，它可以为我节省很多工作。我想我需要做的就是clearInterval，并保留它们的任何功能。

正确但不是与其他编程语言并行绘制，请尝试将这些视图作为在将脚本标记注入DOM时立即解释的指令。所以，你正在做的事实上只是重新分配窗口对象的属性。要更好地理解这一点，请在chrome上打开开发人员控制台并按顺序运行：

window.hasOwnProperty("xy")
var xy=1
window.hasOwnProperty("xy")
window.xy
xy="foo"
typeof window.xy 
typeof window

这可以帮助您了解JavaScript引擎如何处理您的代码。

Answer 2

您删除/替换了内容，而不是脚本，您仍然在同一页面上。您也只是将新数据加载到该页面中，因此除非显式停止或重新加载页面，否则您的脚本仍在该页面中运行。

如何在Ajax加载新内容时停止JavaScript执行？

2 个答案: