JavaScriptの同期処理について

Question

function forRoop(){
     for(var i=0;i<=3;i++){
       console.log("For");
       GetServ();
     }
}

function GetServ(){
  var xhr= new XMLHttpRequest();
        //XML処理（割愛）
        xhr.addEventListener("load", function(e){
           console.log("Get");
        }); 
}

このような処理があった場合、XMLHttpRequestが同期処理設定でもログに出力される結果は

For
For
For
Get

となります。
for文でXMLHttpRequestの結果を取った後にfor文を再開させる良い方法はありませんか？

Answer 1

「for文を中断させる」というのは、できませんしやるべきでありません。というのも、通信待ちのあいだじゅう、ブラウザがフリーズしてしまうからです（同じ理由で、XHRの同期モードも非推奨となっています）。

XHRの取得後に処理を再開させるには、XHRのイベントに書くほかありませんが、それをやりだすとネストがカオスになる「コールバック地獄」に陥ります。Promiseとかaync-awaitとか、シンプルに書く手法もいろいろありますが、それぞれに癖があります。

JavaScriptは如何にしてAsync/Awaitを獲得したのか Qiita版

Answer 2

for文でXMLHttpRequestの結果を取った後にfor文を再開させる良い方法はありませんか？

本当にXMLHttpRequestは同期処理設定で実行されていますか？
XMLHttpRequestから同期でリクエストを投げた場合、レスポンスを受信するまでsend()メソッドは応答を返さず、処理を停止します。つまり、結果を取得するまで待ってから次の処理を実行することができます。

以下のコードを参考にしてみてください。

var xhr = new XMLHttpRequest();

for (var i=0; i<=3; i++) {
	console.log("--FOR LOOP START [i=" + i + "]--");

	xhr.open("get", "test.txt", false);  // ●ここのfalseが同期実行を示している
	xhr.send();
	console.log("get:" + xhr.responseText);

	console.log("--FOR LOOP END--");
	console.log("");
}

// 【結果】
// --FOR LOOP START [i=0]--
// get:<data>abc</data>
// --FOR LOOP END--
// 
// --FOR LOOP START [i=1]--
// get:<data>abc</data>
// --FOR LOOP END--
// 
// --FOR LOOP START [i=2]--
// get:<data>abc</data>
// --FOR LOOP END--
// 
// --FOR LOOP START [i=3]--
// get:<data>abc</data>
// --FOR LOOP END--