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

在我正在开发的网站中，内容是用Ajax加载的，包括所有JavaScript。我这样做是因为所有的页面都是相同的布局，但只有内容是不同的

问题是，当“内容”中包含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>

函数loadPage1（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
response=xhttp.responseText；
$（“#内容”）.remove（）；
$（“#主要内容”）。追加（回复）；
}
};
打开（“GET”，“page1.html”，true）；
xhttp.send（）；
}
函数loadPage2（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
response=xhttp.responseText；
$（“#内容”）.remove（）；
$（“#主要内容”）。追加（回复）；
}
};
打开（“GET”，“page2.html”，true）；
xhttp.send（）；
}
加载第1页
加载第2页

然后是包含JavaScript内容的2个页面，基本上只是每秒向控制台发送“我是第x页”的垃圾邮件

第1页：

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



<script type="text/javascript">

    setInterval(function(){

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

    },1000);
</script>

</div>

第1页
setInterval（函数（）{
console.log（“我是第1页”）；
},1000);

第2页：

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



<script type="text/javascript">

    setInterval(function(){

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

    },1000);
</script>

</div>

第2页
setInterval（函数（）{
控制台日志（“我是第2页”）；
},1000);

Ajax加载良好，我可以看到

h1

从

Page 1

更改为

Page 2

。但在控制台中，我可以看到第一个脚本即使在内容被删除后仍在发送垃圾邮件

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

---

编辑：为了避免混淆，

setInterval（）

不是主要问题，它只是一个示例。我想问的是，您通常如何使用Ajax和JavaScript处理此类问题？您删除/替换了内容，而不是脚本，您仍然在同一页面上。此外，您只将新数据加载到该页面中，因此脚本仍在该页面中运行，除非其显式停止或页面重新加载。

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

即使第1个

块已被替换，但由于javascript的工作方式，您仍会看到控制台日志

你的匿名函数

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

将继续存在并继续执行，直到您调用

clearInterval

或离开此页面

当您添加一个单击处理程序时也是如此，例如

$（'#some_button'）。在（“单击”，函数（evt）{/*做某事*/}）

即使您声明了一个变量，比如
var x='data1'
然后删除包含的
标记，变量
x
将继续存在

在这两种情况下，对函数和变量的引用都存储在某个地方。对setInterval和click处理程序函数的引用由事件处理程序保存。（除非你使用了一种新的方法）

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


总之

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

回复：评论中的问题

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

是的，但不要与其他编程语言并行，而是尝试将它们视为在将脚本标记注入DOM时立即解释的指令。因此，实际上您所做的只是重新指定窗口对象的属性。为了更好地理解这一点，请在chrome上打开开发者控制台，并按顺序运行：

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

这将帮助您了解JavaScript引擎是如何处理代码的。
即使第一个
块已被替换，您也会看到控制台日志，这是因为JavaScript的工作方式

你的匿名函数

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

将继续存在并继续执行，直到您调用
clearInterval
或离开此页面

当您添加一个单击处理程序时也是如此，例如
$（'#some_button'）。在（“单击”，函数（evt）{/*做某事*/}）

即使您声明了一个变量，比如
var x='data1'
然后删除包含的
标记，变量
x
将继续存在

在这两种情况下，对函数和变量的引用都存储在某个地方。对setInterval和click处理程序函数的引用由事件处理程序保存。（除非你使用了一种新的方法）

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


总之

您需要清除间隔
您声明的函数和变量将存在于