Question

我现在不使用Json或jquery - 仅仅是普通的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

唯一明智的解决方案是，一旦后者完成工作，就从showNextName内部调用populateArray。

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

2 个答案: