javascript - 在继续之前等待 FileReader 完成

Question

所以我第一次开始使用 HTML5 和 JS 来为 future 的游戏做一些实验。我正在使用 FileReader 读取代表 map 的本地文本文件，并使用脚本根据读取的文本返回数组数组。

问题是，我在处理 undefined variable 时遇到了麻烦。因为我的代码在 FileReader 能够读取输入文件并进行处理之前执行。这是我读入的 block :

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() 是一个外部函数，它只获取原始文本并返回基于它的二维数组。这一切都很好......我通过登录 readMap 函数来测试它。问题是我稍后在这个文件中引用这个“ map ”变量，以便读取它、渲染它等。加载我的代码时，我立即得到“Uncaught ReferenceError: map is not defined”。这是完全合理的……因为上面的 block 还没有执行……因为它仍在等待用户选择输入文件。

这是稍后在代码中需要访问“ 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 和回调的想法......但我的感觉是它们是完成这项工作的方式。我假设我需要以某种方式告诉我的其余代码在“ map ”对象创建完成之前不要执行。

我希望这很清楚。感谢您的帮助!

Answer 1

仅在收到数据后调用函数 drawMap() 或任何其他函数，因此在 reader.onload 回调中，如果您想访问此 map 之后，使 map 变量成为全局变量，例如:

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);

或者你也可以将 map 变量传递给 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;
    }
}