インポートされた配列のJavaScriptランダムな項目が不思議な動作をしています

Question

次のコードは奇妙な動作をしているようです。基本的には、テキストファイルから行区切りの文のリストをインポートし、その中から配列を作成しています。しかし、配列からランダムな文を選択しようとすると、sentenceStringが定義されなくなるため、動作しません。

ただし、実行時 Math.floor（Math.random（）*（sentenceArr.length）+ 1）; 期待どおりの素敵な乱数が得られます。

私がsentenceArr.lengthを実行すると、 という数字が得られます。これは実際には長さです。

私には何が欠けていますか？

var sentenceArr = []; 

    $.get('sentences.txt', function(data){ 
     sentenceArr = data.split('\n'); 
    }); 

    var rand = Math.floor(Math.random() * (sentenceArr.length) + 1); 

    var sentenceString = sentenceArr[rand]; 

    var sentence = sentenceString.split(' '); 

更新： 以下示唆したように私は約束を作ってみましたが、それはまだ動作していないようです。約束と私の新しいコードは次のようになります。

var sentenceArr = []; 
    var done = false; 

    function loadSentences() { 
     var rand = Math.floor(Math.random() * (sentenceArr.length) + 1); 
     var sentenceString = sentenceArr[rand]; 
     var sentence = sentenceString.split(' '); 
    }; 

    $.get('/sentences.txt', function(data){ 
     sentenceArr = data.split('\n'); 
     done = true; 
    });  

    var isItDone = new Promise(function(resolve) { 
     if(done) { 
      resolve('it worked'); 
     } 
    }); 

    //consume the promise: 
    var checkIfDone = function() { 
     isItDone 
      .then(function (fulfilled) { 
       loadSentences();   
      }) 

      .catch(function (error) { 
       console.log('oops, it failed'); 
      }); 
    }; 

    checkIfDone(); 

これは約束が果たされることはありませんかのように、常に、「おっと、それは失敗しました」を返すように思われます。しかし、「done」の値をチェックすると「true」になります。つまり、Ajaxリクエストが完了してから次のステップに移ります。誰でも私を啓発できますか？私はすでに3つのチュートリアルを約束していますが、自分のコードにそのコンセプトを適用する際のエラーを理解できないようです。ありがとうございました。

Answer 1

問題は、サーバーの応答が完了する前にファイルの内容を操作しようとしていることです。

とjQueryのAJAX APIを使用して、あなたの疑問を解決する方法https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promiseより多くを理解することは約束を見てみましょう。

var sentenceArr = []; 
var file = 'path/to/file'; 

$.get(file) 
.done(function (data) { 
    sentenceArr = data.split('\n'); 
    var rand = Math.floor(Math.random() * (sentenceArr.length) + 1); 
    var sentenceString = sentenceArr[rand]; 
    var sentence = sentenceString.split(' '); 

    console.log(sentenceArr) 
    console.log(rand) 
    console.log(sentenceString) 
    console.log(sentence) 
}); 

Answer 2

おかげで、私は最初の機能のすべてを包み、そしてAjaxは完成した "GET" した後にのみ、すべてを実行するために）（.then使用して問題を解決：

var sentenceArr = []; 

のconstのgetData = （）=> $に.get（ 'http://eslquiz.net/wordmix/sentences.txt'、関数（データ）{

}) 

.then(data => { // use this format to run function only after json get is done (since it's async) 
        // "data" is the contents of the text file 
    sentenceArr = data.split('\n'); 
    console.log('Made sentence array'); 

    loadSentences(); 

}）。