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（） ）。 但是，在極少數情況下，您希望這樣的請求是同步的。 考慮是否需要同步，因為在讀取文件之前，您將阻止整個應用程序或網站。