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

Question

在我正在开发的网站中，内容是通过 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>

然后是包含 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>

第 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> block 已被替换，由于 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 和单击处理函数的引用由事件处理程序保存。 A reference to any var and function you declare is held in the window object (除非您使用 closure )。

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

<小时/>

总而言之，

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

<小时/>

回复:评论中的问题

oh, so If I declare a new behavior for a function, it wouldn't give me an error like it would with static programming languages. It 2ould save me a lot of work if I can keep the namings the same. I guess all I need to do is clearInterval, and keep whatever functions as they are.

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

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

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