続行する前にFileReaderが完了するのを待つ

Question

私は、将来のゲームのためにいくつかの実験を行うために初めてHTML5とJSで作業を開始しています。私はFileReaderを使用して、マップを表すローカルテキストファイルを読み込み、読み込んだテキストに基づいて配列の配列を返すスクリプトを使用しています。

問題は、未定義の変数に問題があります。 FileReaderが入力ファイルを読み込み、その処理を行う前に私のコードが実行されているからです。これは、読み込み私のブロックである。

document.getElementById('input').addEventListener('change', function() { 
     var file = this.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      let map = readMap(e.target.result); 
     } 
     reader.readAsText(file); 
    }, false); 

readMap（）は、単に生のテキストを受け取り、それに基づいて、2次元配列を返す外部関数です。これはすごくうまくいきます。私はreadMap関数の内部にログインしてテストしました。問題は、このファイルの後にこの 'map'変数を参照してそれを読み込んでレンダリングすることです。コードをロードするとすぐにUncaught ReferenceError：mapが定義されません。これは理にかなっています。なぜなら、上記のブロックはまだ実行されていないからです。ユーザーが入力ファイルを選択するのを待っているからです。ここで

は、後にコードの「マップ」へのアクセス必要があるいくつかの機能の一つである：

function drawMap() { 
     let x = 0; 
     let y = 0; 
     for(var i=0; i<map.length;i++) { 
      for(var j=0; j<map[i].length;j++) { 
       if(map[i][j] === 1) { 
        ctx.fillRect(x,y,BLOCK_SIZE,BLOCK_SIZE); 
        x+=BLOCK_SIZE; 
       } 
       else if(map[i][j] === 'S') { 
        player.x = x; 
        player.y = y; 
        x+=BLOCK_SIZE; 
       } 
       else { 
        x+=BLOCK_SIZE; 
       } 
      } 
      x=0; 
      y+=BLOCK_SIZE; 
     } 
    } 

イムわからないという場合に役立ちますが、私はちょうど私方法の例を与えたいと思いましたこの配列を使用する必要があります。

JSについてかなり新しいので、私は実際にonLoadsとコールバックのアイデアを頭で囲んでいません...しかし、私の気持ちは、彼らがこの仕事をする方法です。私は、「マップ」オブジェクトが作成されるまで、コードの残りの部分を実行しないよう何とか指示する必要があると仮定します。

わかりやすかったです。どんな助けもありがとう！

Answer 1

後でこのmapにアクセスしたい場合は、map変数グローバル例えば作り、これreader.onloadコールバックの中に、あなたがデータを受け取った後にのみ機能drawMap()または任意の他の関数を呼び出します。

var map; 
document.getElementById('input').addEventListener('change', function() { 
var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     map = readMap(e.target.result); 
     drawMap(); 
    } 
    reader.readAsText(file); 
}, false); 

それともできますマップ変数をdrawMap関数に渡します。

document.getElementById('input').addEventListener('change', function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     let map = readMap(e.target.result); 
     drawMap(map); 
    } 
    reader.readAsText(file); 
}, false); 

function drawMap(map) { 
    let x = 0; 
    let y = 0; 
    for(var i=0; i<map.length;i++) { 
     for(var j=0; j<map[i].length;j++) { 
      if(map[i][j] === 1) { 
       ctx.fillRect(x,y,BLOCK_SIZE,BLOCK_SIZE); 
       x+=BLOCK_SIZE; 
      }else if(map[i][j] === 'S') { 
       player.x = x; 
       player.y = y; 
       x+=BLOCK_SIZE; 
      }    else { 
       x+=BLOCK_SIZE; 
      } 
     } 
     x=0; 
     y+=BLOCK_SIZE; 
    } 
}