Javascript未正确执行过程

Question

我正在尝试使用JavaScript来操作我正在构建的虚拟网页中的页面内容。

为此，我编写了一个名为writeText(file_name, location)的小函数，该函数获取由文件名指定的HTML文件，并将该文件的内容打印到一对<div>标记的innerHTML中，该标记的id属性对应于location字段。

然后我将调用封装在其他函数中，以自动构建完整的页面，如下所示。

所以我把看起来像这样的东西叫做：

function displayHome() {
    writeText('homeMain.html', 'mainFrame');
    writeText('homeSide.html', 'sideFrame');
}

...to显示主页。

但是，当我调用此函数时，显示只更新'sideFrame'对象，而不对'mainFrame'的内容进行任何更改。但是如果我在两个writeText()调用之间发出警告(“Dummy”)来中断函数，那么两个contentFrames都会正确更新。

我想知道以前有没有人见过这样的东西，有没有人知道如何修复它。

为了完整起见(这篇文章几乎是从w3schools网站逐字复制过来的)：

function writeText(script_file, location) {
    if (window.XMLHttpRequest)  {
        xmlhttp = new XMLHttpRequest();
    }   else    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        document.getElementById(location).innerHTML = xmlhttp.responseText;
    }
xmlhttp.open("GET",script_file,true);
xmlhttp.send();
}

Answer 1

您使用的是一个全局变量xmlhttp，因此它会在函数第二次运行时被销毁。请求本身是异步的，因此第二个调用运行，而第一个调用仍在运行。

要解决此问题，请改用局部变量(以便每个函数调用都有自己的xmlhttp)，方法是在xmlhttp之前使用"var“关键字：

var xmlhttp;
if (window.XMLHttpRequest)  {
    xmlhttp = new XMLHttpRequest();
}   else    {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}