JavaScript执行代码顺序

Question

我正在用JavaScript迈出第一步，并试图理解它的工作原理。 我遇到了代码执行顺序的问题。

var Parsed = [[]]
var txtFile = new XMLHttpRequest();
alert("Trying to open file!");

txtFile.open("GET", "http://foo/f2/statistics/nServsDistrito.txt", false);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
    if (txtFile.status === 200) {  // Makes sure it's found the file.
         alert("File Open");
         allText = txtFile.responseText; 
         Parsed = CSVToArray(allText, ",")
         }
    }
}
txtFile.send(null); 

alert("Job Done");

问题是“作业完成”比“文件打开”首先出现。

但是该文件具有“作业完成”警报之后的代码所必需的信息。 我更改了“ get”请求的异步部分，但是没有用。

打开文件并检索信息时，我该怎么做才能支持所有代码？ 打开和解析文件时，我可以使用readyState来暂停代码吗？

谢谢您的帮助。

更新：现在一切正常。

Answer 1

那是因为您正在使用异步函数。 使用异步函数时，必须使用回调 。
回调是一个函数（例如， function cback() ），您可以将其作为参数传递给另一个函数（例如， function async() ）。 好吧，在必要时async将使用cback 。
例如，如果您正在执行IO操作（例如读取文件或执行SQL查询），则回调可用于在检索到数据后处理：

asyncOperation("SELECT * FROM stackoverflow.unicorns", function(unicorns) {
    for(var i=0; i<unicorns.length; i++) {
        alert("Unicorn! "+unicorns[i].name);
    }
});

我们为asyncOperation提供的匿名函数的第二个参数是“回调”，一旦查询数据准备好，它将被执行。 但是，在处理该操作的同时，您的脚本没有被阻止，这意味着，如果我们在前面的代码之后添加以下行：

alert("We are not blocked muahahaha");

该查询将在查询完成和独角兽出现之前显示。

因此，如果要在异步任务完成后执行某些操作，请在回调中添加该代码：

asyncOperation("SELECT * FROM stackoverflow.unicorns", function(unicorns) {
    for(var i=0; i<unicorns.length; i++) {
        alert("Unicorn! "+unicorns[i].name);
    }
    //add here your code, so that it's not executed until the query is ready
});

注意：正如@radhakrishna在评论中指出的，如果您传递true而不是false则open()函数也可以以同步方式工作。 这样，代码将按预期工作：一行一行，换句话说：同步。

---

回调可以用于很多事情，例如：

function handleData(unicorns) {
    //handle data... check if unicorns are purple
}
function queryError(error) {
    alert("Error: "+error);
}
asyncOperation("SELECT * FROM stackoverflow.unicorns", handleData, queryError);

在这里，我们使用两个回调，一个用于处理数据，另一个在发生错误时（当然，这取决于asyncOperation工作方式，每个异步任务都有自己的回调）。

Answer 2

XMLHttpRequest是一个异步操作。 您的文件是否随时可用，甚至没有网络连接都没有关系。 因为它是一个异步操作，它将始终之后的任何顺序/同步代码后执行。 这就是为什么您必须声明一个回调函数（ onreadystatechange ），当open随文件内容一起返回时将被调用的原因。

通过上面的解释，此示例中的代码不正确。 alert行将立即执行，而不会等待文件内容准备就绪。 仅当onreadystatechange完成执行时才完成作业，因此您必须将alert放在onreadystatechange的末尾。

触发异步操作的另一种非常常见的方法是使用setTimeout ，它强制其回调函数异步执行。 在这里查看其工作原理。

编辑：您确实迫使请求，通过设置第三个参数是同步open到false （ https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#open（） ）。 但是，在极少数情况下，您希望这样的请求是同步的。 考虑是否需要同步，因为在读取文件之前，您将阻止整个应用程序或网站。