javascript - ajax 变量仅在第一次在 cordova 中未定义

Question

好吧，这就是问题所在:setDates() 函数第一次工作时，变量 day 是未定义的。然后下次它返回日期变量上次应该具有的值。该变量被定义直到到达 setDates.php 文件中。然后由于某种原因它第一次是未定义的。 Php 文件并不重要，只是一个 die(variable) 函数...请帮助我。

function controlDates() {

//today = $('#chooseDate').val();
today= document.getElementById('chooseDate').value;
user = localStorage.Username;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        msg = this.responseText;
        $('#comfirmMess').html(msg);
        if (msg == 'available') {
            $('#comfirmMess').html('');
            $('#ChooseHour').show();
            $('#checkButton').show();
            setDates();
        }
    }
};
xhttp.open("GET", "https://ptyxiaki.000webhostapp.com/controlDates.php?today=" + today + '&user=' + user, true);
xhttp.send();

}


function setDates() {
if ($("input:radio[name='ProgramName']").is(":checked"))
    trainName = $("input[name='ProgramName']:checked").val();
 //today = $('#chooseDate').val();
var dsplit = today.split("/");
// day = new Date(dsplit[0], dsplit[1] - 1, dsplit[2]);
day = new Date(today);
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

day = weekday[day.getDay()];

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        msg = this.responseText;
        mess=msg;
        msgarr = msg.split(" ");
        startTime = msgarr[0];
        finnishTime = msgarr[1];


    }
};
xhttp.open("GET", "https://ptyxiaki.000webhostapp.com/setDates.php?today="    + day, true);
xhttp.send();




var xhttl = new XMLHttpRequest();
xhttl.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        msg = this.responseText;
        if (msg == 'Please enter a valid trainer') {
            $('#comfirmMess').html(msg);
            $('#ChooseHour').hide();
            $('#checkButton').hide();
        }
        res = [];
        DisHours = msg.split(" ");
        for (i = 0; i < DisHours.length - 1; i++) {
            res[i] = DisHours[i].split(":");
            DisHours[i] = res[i][0];
        }
    }
}

xhttl.open("GET", "https://ptyxiaki.000webhostapp.com/showAvailDates.php?date=" + today + '&trainName=' + trainName, true);
xhttl.send();


}

Answer 1

问题在于 AJAX 请求是异步的；您对 setDates 的调用不会等待您对 controlDates 调用的响应。因此，您的逻辑流程如下:

1. 您向 controlDates 发出请求
2. 请求已成功发送至controlDates
3. 您向 setDates 发出请求，其中日期未定义
4. 请求已成功发送至setDates
5. 在某个随机点，对 controlDates 的调用的响应返回
   (大概成功)，并且定义了day。

因此，您对 setDates 的第一次调用仍在等待 day 由对 controlDates 调用的成功响应定义。

为了解决这个问题，您需要使用 promise并说“有东西将从调用 A 返回，等到它到达这里再调用调用 B”。

要使用带有原始 XMLHttpRequest 的 Promise，您可以使用以下内容(记入 SomeKittens ):

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

希望这有帮助! :)