ajax変数はコードバで初めて初めて定義されます

Question

まあ、これは問題です。変数dayはsetDates（）関数が初めて動作するときには未定義です。それで、次回は、変数が前回持っていたはずの値を返します。変数は、setDates.phpファイルに到達するまで定義されます。その後、何らかの理由で、初めて定義されていません。 PHPファイルは何も重要ではなく、ちょうど死ぬ（変数）機能...助けてください。

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要求があるということです asyncrononous。 setDatesへのお電話は、controlDatesへのご返信をお待ちしておりません。そのように、あなたのロジックの流れはこのようなものです：

1. あなたはcontrolDates
2. への要求は、要求が正常にがcontrolDates
3. にを送ってきたあなたは、未定義dayでsetDatesにリクエストを作る作ります
4. リクエストは正常に完了しました〜setDates
5. ランダムな点では、応答controlDatesへの呼び出しから
   （おそらく正常に）が返され、dayが定義されます。このよう

dayがcontrolDatesへの呼び出しから成功応答によって定義するために、setDatesにあなたの最初の呼び出しは、まだ待っています。

これを回避するには、promiseを使用して、「何かがコールAから戻って来て、コールBをするまで待ってください」と言います。

生のXMLHttpRequestとの約束を利用するために、あなたは（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); 
}); 

・ホープこのことができます！ :)