2013-08-24 129 views
3

我有一個函數loadTileSet()。該函數必須返回arrTiles(圖像數據數組),但函數返回UNDEFINED。我用推把數據放入數組..Javascript函數返回數組undefined

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<imageWidth;i+=sndCanvasWidth){ 
       for(j=0;j<imageHeight;j+=sndCanvasHeight){ 
        var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight); 
        arrTiles.push(myImageData); 
       } 
      } 
      return arrTiles; 
     } 
    } 

在這裏,我試圖把陣列到另一個

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

您正在從onload處理函數返回,而不是從'loadTileSet'函數返回。 – Bergi

+2

問題是加載是異步完成的,你*不能*從函數返回imageDate。請參閱[如何從AJAX調用返回響應?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call)獲取可能的解決方案。 – Bergi

回答

5

Bergi的評論已經說明了這個問題。這是一個異步過程,因此您需要將它作爲一個整體來處理。總體思路是使用回調函數:

function loadTileSet(callback) { 
    // ... 

    imgTileSet.onload = function() { 
     // instead of return, do this 
     callback(arrTiles); 
    }; 
} 

loadTileSet(function (arrNew) { 
    // now you can use arrNew 
}); 
0

你的函數不返回任何東西。另外,在你填充數組的地方,它被封裝在那個函數中。