在window.onload中调用一个新函数之前如何确保我的Ajax调用完成？

Question

我现在不使用Json或jquery - 仅仅是简单的vanilla Javascript答案 （我在SE上找到了一堆这个问题的答案，但它们都包括Jquery或Json）。

我在window.onload=function(){...事件处理程序中有两个函数。 第一个函数fillArray(from,to)是一个表单的Ajax调用：

function fillArray(from,to){
  request = createRequest();
  if (request == null) {
    return;
  }
  var url= "Ajax_retrieveNames.php?indexFrom=" + from + "&indexTo=" + to;
  request.open("GET", url, true);
  request.onreadystatechange = populateArray;
  request.send(null);
}

function populateArray(){
  var xmlFrag=null;
  if (request.readyState == 4) {
    if (request.status == 200) {
      xmlFrag = request.responseXML;
      for(var i=indexFrom; i<=indexTo; i++){
        fcArray[i]=new Array();
        var f=xmlFrag.getElementsByTagName("first")[i].childNodes[0].nodeValue;
        var l=xmlFrag.getElementsByTagName("last")[i].childNodes[0].nodeValue;
        fcArray[i][0]=f;
        fcArray[i][1]=l;
      }
    }else{
      return;
    }
  }else{
    return;
  }
}

第二个函数showNextName()处理格式化并显示下一个（在本例中为第一个）子数组的元素。 此时， var arrayIndex设置为0：

function showNextName(){
  displayQuestion() // Deals with page formatting
  document.getElementById('firstName').innerHTML=fcArray[arrayIndex][0];
  document.getElementById('lastName').innerHTML=fcArray[arrayIndex][1];
  updateArrayIndex(); // Is a counter that increments the variable arrayIndex
}

我的问题是，在完成Ajax调用并填充数组之前，脚本会进入第二个函数showNextName() 。 我可以通过在两个函数之间加入一个计时器来解决这个问题，但这很笨拙。 有没有更好的方法来确保我们不进入showNextName()或离开window.onload直到Ajax调用完成并填充数组？

Answer 1

在成功回调中调用showNextName （ populateArray ）。 由于AJAX是异步的，因此当readyState为4时，您需要根据它来执行逻辑，就像在populateArray函数中一样。

function populateArray(){
  var xmlFrag=null;
  if (request.readyState == 4) {
    if (request.status == 200) {
      xmlFrag = request.responseXML;
      for(var i=indexFrom; i<=indexTo; i++){
        fcArray[i]=new Array();
        var f=xmlFrag.getElementsByTagName("first")[i].childNodes[0].nodeValue;
        var l=xmlFrag.getElementsByTagName("last")[i].childNodes[0].nodeValue;
        fcArray[i][0]=f;
        fcArray[i][1]=l;
      }
      showNextName();
    }else{
      return;
    }
  }else{
    return;
  }
}

Answer 2

唯一合理的解决方案是在populateArray调用showNextName ，一旦后者完成其工作。