爲什麼我不能訪問位圖的x變量？ （javascript）

Question

我想通過我的數組中的3個圖像循環並將其添加到舞臺（使用easelJS）。我也想定位它。當我嘗試訪問數組中的圖像時，出現錯誤，說我無法設置未定義的x。爲什麼不能訪問easeljs位圖的x變量？

function displayPosters() { 

    getPosters(); //get all images and assign it to designated array 

      console.log(frontPosters); 
      console.log(frontPosters.length); 

    if(currentCat == Category.HOME) { //if current category is HOME 

     for(var i = 0; i < frontPosters.length; i++) { //loop through posters 

      frontPosters[i].x = 40; //set x position for testing, also where error occurs 
      stage.addChild(frontPosters[i]); //add poster to stage 

     } 

    } 

} 

這裏是加載和推送這些圖像到frontPosters arrray的代碼。

var frontPosters = new Array(3); 

function getPosters() { 

    var games = new Image(); //create 3 images 
    var apps = new Image(); 
    var aboutme = new Image(); 

    games.onload = function() { //add image to frontImages array on load 

     var gamesPost = new createjs.Bitmap(games); 
     frontPosters[0] = gamesPost; 

    }; 

    apps.onload = function() { 

     var appPost = new createjs.Bitmap(apps); 
     frontPosters[1] = appPost; 

    }; 

    aboutme.onload = function() { 

     var amPost = new createjs.Bitmap(aboutme); 
     frontPosters[2] = amPost; 

    }; 

    games.src = "images/assets/posters/games_poster.jpg"; 
    apps.src = "images/assets/posters/apps_poster.jpg"; 
    aboutme.src = "images/assets/posters/aboutme_poster.jpg"; 

} 

Answer 1

使用for(poster in frontPosters)是不好的做法，因爲你實際上遍歷數組對象，而不是值（又稱爲數組本身）。改爲使用for(var i=0; i<frontPosters.length; i++)。這是最簡單的解決方案，IMO。

for(var i = 0; i < frontPosters.length; i++) { //loop through posters 
    frontPosters[i].x = 40; //set x position for testing, also where error occurs 
    stage.addChild(frontPosters[i]); //add poster to stage 
} 

編輯

我認爲你正在處理一個競爭條件。您將在之前加載您的陣列所有圖像都已加載。通過設置var frontPosters = new Array(3);，您可以自動將三個值設置爲undefined，這些值將被推入到新陣列中。

在繼續處理腳本之前，您應該檢查是否加載了所有圖像。

這裏有一個想法給你。設置一個回調，只有在加載第三張圖片後才能運行。

var frontPosters = new Array(3); 

function getPosters(callback) { 

    var games = new Image(), 
     apps = new Image(), 
     aboutme = new Image(), 
     loaded = 0; 

    games.onload = function() { 
     frontPosters[0] = new createjs.Bitmap(this); 
     if (++loaded === 3) callback(); 
    }; 

    apps.onload = function() { 
     frontPosters[1] = new createjs.Bitmap(this); 
     if (++loaded === 3) callback(); 
    }; 

    aboutme.onload = function() { 
     frontPosters[2] = new createjs.Bitmap(this); 
     if (++loaded === 3) callback(); 
    }; 

    games.src = "images/assets/posters/games_poster.jpg"; 
    apps.src = "images/assets/posters/apps_poster.jpg"; 
    aboutme.src = "images/assets/posters/aboutme_poster.jpg"; 

} 

function displayPosters() { 

    getPosters(function() { 
     if(currentCat == Category.HOME) { //if current category is HOME 
      for(var i = 0; i < frontPosters.length; i++) { //loop through posters 
       frontPosters[i].x = 40; //set x position for testing, also where error occurs 
       stage.addChild(frontPosters[i]); //add poster to stage 
      } 
     } 
    }); //get all images and assign it to designated array, only after all images were loaded 

}