グローバル配列javascriptの範囲

Question

私はcsvからデータを読み込み、オブジェクトの配列に格納しようとしています。私はグローバル変数が嫌になることは知っていますが、データを格納し、複数の関数からアクセスするより良い方法を考えることはできません。ここで

は私のコードです：最初のスポットで

var mydata = new Array; 
$(document).ready(function() { 
    $.get('./datafile.csv', function(data) { 
     var head = data.split("\n"); 
     for(var i = 1; i < head.length; i++){ 
      line = head[i].split(","); 
      var obj = { 
       index:i, 
       img:line[0], 
       caption:line[1], 
       desc:line[2] 
      }; 
      mydata.push(obj); 
     } 
     console.log(mydata); //1 
    }); 
    console.log(mydata); //2 
    //I then want to select various elements on my page and set some attributes to 
    //an object in my data, but I can't since everything is undefined 
}); 

それは正しく私のデータを記録しますが、2番目の場所で、それは空の配列をログに記録します。私はJavaScriptでグローバル変数にthis articleを読んでいるので、何がうまくいかないのか分かりません。

Answer 1

2番目の部分（//2）が早すぎます。 $.getが実行されると、CSVを取得するためにHTTPリクエストが開始されますが、完了するのを待つことはありません。そのため、function(data)を渡す必要があります。要求が完了した後、コールバック関数が呼び出されます。初期化を続行する必要があります。

コードは以下のようになります。私はあなたのコードで何が起こっているかの順序について、混乱するかもしれないと思う

$(document).ready(function() { 
    $.get('./datafile.csv', function(data) { 
     var mydata = []; 
     var head = data.split("\n"); 
     // ... 

     console.log(mydata); //1 
     continueSetup(mydata); // 2 
    }); 
}); 

function continueSetup(mydata) { 
    // do what you need 
} 

Answer 2

2でデータは、初期化されたものと同じになります。 1に入力すると、入力したデータと同じデータになります。

2あなたが近くで観察した場合、最初に印刷されます。これは、$.getが非同期呼び出しであり、バックグラウンドで実行されるためです。 $.getに提供しているコールバックは、GET要求が正常に完了したか、エラーが発生した後に実行されます。

Answer 3

を（あなたが他の場所でデータを使用する必要がある場合は、グローバルを使用し続けることができますが、それはまさにこのために必要ではないです） 。まず、このようなグローバル変数を使用することは間違いありません。特に、イベントやそのような方法を使ってページ全体に複数回アクセスする場合は問題ありません。第2に、あなたの関数がデータを受け取ったの前にのスポット（＃2）が実際に実行され、＃1の前にが受け取られているため、コードの2番目の場所に空の配列が表示されている理由があります。

getは、応答を受け取るのを待ってからコードを実行します（＃1を含む）。しかし、＃2はすぐに実行され、配列はまだ空です。