왜 비트 맵의 ​​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로 푸시하기위한 코드가 있습니다. 실제로 아닌 값 (배열 자체 일명) 배열 오브젝트 반복하고 있기 때문에 사용 for(poster in frontPosters)

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(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 

}