javascriptの匿名関数が変数を更新しない

Question

これは私の問題です。ファイルを取得して内容を返す関数があるため、ホストプロバイダはPHPを使用できません。

function getStoryFromFile(file){ 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      return xhttp.responseText; 
     } 
    }; 
    xhttp.open("GET", file, true); 
    xhttp.send(); 
} 

そして、私は匿名関数がそのようには機能しないことを発見しました。それで、私はそれをそうすることによって動作させようとしました。

function getStoryFromFile(file){ 
    var xhttp = new XMLHttpRequest(); 
    var x = 'false'; 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      x = 'true'; 
     } 
    }; 
    xhttp.open("GET", file, true); 
    xhttp.send(); 
    if (x == 'true'){ 
     return xhttp.responseText; 
    } 
} 

しかし、それもうまくいきませんでした。だから私は何時間もそれを微調整しようとしましたが、何も働いていません。私が得るすべては、「未定義」です。だから、誰かがJavascriptで2番目の方法でコンテンツを返すことができない理由、なぜjavascriptの開発者がそのような言葉を理解しにくい言語にしたのかを私に説明してください。ありがとうございました。

EDIT どのように変数に書き込むためのコールバック関数を取得しますか？ 私が持っている：

function displayPage(){ 

file = 'story1.html' //Not actually like this in file, it changes based on database but i simplified it 
var toHTML = ''; 
getStoryFromFile(file,function(text){ 
toHTML += text + "<br>"; 
}); 
document.getElementById('div').innerHTML = toHTML; 
} 

無名関数は、それがグローバルだにもかかわらず書き込みません。今の主な問題です

Answer 1

いいえ、それは非同期呼び出し（無名関数とは関係ありません）なので、動作しません。適切なことは、代わりにコールバック関数を提供することです。

function getStoryFromFile(file, callback){ 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      callback(xhttp.responseText); 
     } 
    }; 
    xhttp.open("GET", file, true); 
    xhttp.send(); 
} 

getStoryFromFile('someFile', function(text){ 
    // do something with the responseText. let's console.log it: 
    console.log(text); 
});