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

Question

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

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. 您使用未定义的day向setDates发出请求
4. 请求已成功发送到setDates
5. 在某个随机点，对controlDates的调用的响应返回
   (可能成功)，并且定义了day

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

为了解决这个问题，您希望利用承诺，并说"呼叫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);
});

希望这能有所帮助！：)