Javascript函数返回数组undefined

参见英文答案 > How do I return the response from an asynchronous call?                                    34个
我有一个函数loadTileSet().此函数必须返回arrTiles(图像数据数组),但函数返回UNDEFINED.我正在使用push将数据放入数组中..

function loadTileSet(){
var canvas = document.getElementById('fakeCanvas');
$('#fakeCanvas').hide();
var ctx = $("canvas")[0].getContext('2d');
var imgTileSet = new Image();
imgTileSet.src = 'tileset.png';
var imageTileNumWidth = 23;
var imageTileNumHeight = 21;
var arrTiles = [];
imgTileSet.Onload= function(){
var imageWidth = imgTileSet.width;
var imageHeight = imgTileSet.height;
sndCanvasWidth = imageWidth/imageTileNumWidth;
sndCanvasHeight = imageHeight/imageTileNumHeight;
canvas.width = imageWidth;
canvas.height = imageHeight;
ctx.drawImage(imgTileSet,0,0,imageWidth,imageHeight);
var i=0;
var j=0;
var t=0;
for(i=0;i for(j=0;j var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight);
arrTiles.push(myImageData);
}
}
return arrTiles;
}
}


在这里我尝试将数组放入另一个

var arrNew = loadTileSet();
console.log(arrNew[0]);


解决方法:

Bergi的评论已经说明了这个问题.这是一个异步过程,因此您需要将其作为一个处理.一般的想法是使用回调：

function loadTileSet(callback) {
// ...
imgTileSet.Onload= function () {
// instead of return, do this
callback(arrTiles);
};
}
loadTileSet(function (arrNew) {
// now you can use arrNew
});