Question

当我将LoadTask2作为回调传递时，在读取文本文件之前，我正在执行LoadTask2。可能是什么原因？读取文本文件后如何使LoadTask2执行？

LoadTask1(LoadTask2);

function LoadTask1(LoadTask2) {
  let parEtask1Pending = document.getElementById('task1Status');
  parEtask1.replaceChild(loadingE, parEtask1Pending);
  currentIntervalId = setInterval(function() {
    readTextFile("file1.txt", getTextData);
  }, 2000);
  LoadTask2();
}

function LoadTask2() {
  console.log("Task2")
}

function readTextFile(file, callback) {
  console.log('Reading file..')
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "textFiles/" + file, true);
  rawFile.onload = function() {

    if (this.status === 200) {
      getTextData(this.responseText);

    }

  }
  rawFile.send();
}

输出如下：Task2->正在读取文件。

Answer 1

问题在这里：

next

javascript不会等待function LoadTask1(LoadTask2) { let parEtask1Pending = document.getElementById('task1Status'); parEtask1.replaceChild(loadingE, parEtask1Pending); currentIntervalId = setInterval(function() { readTextFile("file1.txt", getTextData); }, 2000); LoadTask2(); }完成。 setInterval被执行并开始“并行”运行。

可能的解决方案是像这样在您的setInterval中添加一个承诺：

readTextFile

现在您可以在函数上放一个readTextFile = function(file) { return new Promise(function(resolve, reject){ console.log('Reading file..') var rawFile = new XMLHttpRequest(); rawFile.open("GET", "textFiles/" + file, true); rawFile.onload = function() { if (rawFile.status === 200) { resolve(rawFile.responseText); } rawFile.send(); } }：

.then()

还有另一种使用function LoadTask1(LoadTask2) { let parEtask1Pending = document.getElementById('task1Status'); parEtask1.replaceChild(loadingE, parEtask1Pending); readTextFile("file1.txt").then(function(response){ console.log("your response: " + response); LoadTask2(); }) }的现代解决方案。您也可以这样做：

async/await

这应该工作，我还没有测试。

此功能中还有一件事：

 async function LoadTask1(LoadTask2) {
   let parEtask1Pending = document.getElementById('task1Status');
   parEtask1.replaceChild(loadingE, parEtask1Pending);
   const responseText = await readTextFile("file1.txt");
   console.log(responseText);
   LoadTask2();     
}

实际上，您什么也没有传递回回调函数。您应该将function readTextFile(file, callback) { console.log('Reading file..') var rawFile = new XMLHttpRequest(); rawFile.open("GET", "textFiles/" + file, true); rawFile.onload = function() { if (this.status === 200) { getTextData(this.responseText); } } rawFile.send(); }重命名为getTextData(this.responseText)，然后在回调函数中执行如下的task2：

callback(this.responseText)

Answer 2

那是因为它是由于setInterval函数引起的，它将在执行您的函数之前延迟2秒钟。

即使使用了回调，函数也会在异步函数之前执行

2 个答案: