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（）是一个外部函数，它只接受原始文本并返回基于它的二维数组。这一切都很好..我通过记录readMap函数来测试它。问题在于我引用了这个地图＆＃39;变量稍后在这个文件中读取，渲染它等等。我立即得到“未捕获的ReferenceError：地图未定义＆＃39;加载我的代码时。这非常有意义......因为上面的块还没有执行...因为它仍在等待用户选择输入文件。

以下是需要访问“地图”的少数功能之一。稍后在代码中：

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和回调的想法......但我的感觉是他们是开始做这项工作的方法。我假设我需要以某种方式告诉我的其余代码不要执行，直到＆＃39; map＆＃39;对象已完成创建。

我希望这很清楚。任何帮助表示赞赏！

Answer 1

仅在收到数据后调用函数drawMap()或任何其他函数，因此在reader.onload回调中，如果您想稍后访问此map，请{{1}变量全局例如：

map

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

Answer 2

还有FileReaderInstance.onloadend事件

reader.onloadend = () => drawMap()

在继续之前等待FileReader完成

2 个答案: