할당을 위해 jQuery.getScript()를 사용한 후에 전역 변수가 정의되지 않았습니다.

Question

여러 글로벌 변수가 있습니다. var1, var2 등

나는이 변수를 즉시 인스턴스화하지 않지만 나중에 jQuery을 사용하여 별도의 파일에 생성자를 인스턴스화합니다.

그러나; getScript()으로이 인스턴스를 만든 후에; 나는 새로 인스턴스화 된 객체의 속성에 액세스하려고 시도합니다.

catch되지 않은 형식 오류 :

나는 다음과 같은 오류 얻을 속성을 읽을 수 없습니다 'X'정의되지 않은

의 이유가됩니다; 또는이 방법으로 전역 변수를 인스턴스화 할 수 없습니까?

코드 getScript();

var functionLoadObjects = function(){ 
    $.getScript('objects.js',function(){ 
     //objects 
     gameScreen= new GameObject(0,0,750,1500,'Art_Assets/game_screen/Colabrative Layout copy.png',0); 

     menu= new GameObject(0,0,750,750,'Art_Assets/main_menu/bkg_start2.png',0); 
     startBtn= new GameObject(50,50,65,160,'Art_Assets/main_menu/btn_play.png','Art_Assets/main_menu/btn_playh.png'); 
     creditBtn= new GameObject(50,150,65,160,'Art_Assets/main_menu/btn_help.png','Art_Assets/main_menu/btn_helph.png'); 
     credits= new GameObject(0,0,750,750,'Art_Assets/credits.png',0); 
     //stations 
     sawStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"sawView"); 
     drillStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"drillView"); 
     bendStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"bendView"); 
     weldStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"weldView"); 
     grindStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"grindView"); 
     paintStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"paintView"); 
     assemblyStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"assemblyView"); 
     fabricStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"fabricView"); 
     sewingStation= new WorkStation('Art_Assets/game_screen/workstation.png',0,"sewingView"); 
     console.log(startBtn.x,"startBtn X inside of loader function"); 
     console.log("stuff is happening") 
     loadImg(menu); 
     loadImg(startBtn); 
     loadImg(creditBtn); 
     loadImg(credits); 
     loadImg(sawStation); 
     loadImg(drillStation); 
     loadImg(gameScreen); 
     loadImg(bendStation); 
     loadImg(weldStation); 
     loadImg(grindStation); 
     loadImg(paintStation); 
     loadImg(assemblyStation); 
     loadImg(fabricStation); 
     loadImg(sewingStation); 


     station = [ sawStation,drillStation,bendStation, 
      weldStation,grindStation,paintStation, 
      assemblyStation,fabricStation,sewingStation]; 



     for(var i=0; i<9; i++){ 
      station[i].position=i; 
     } 
     desk= new GameObject(250,550,128,256,'Art_Assets/game_screen/desk.png',0); 
     loadImg(desk); 
     office=new GameObject(750,0,750,750,'Art_Assets/game_screen/office.png',0); 
     loadImg(office); 

    }) 
}; 

홈페이지 방법 :

var main = function() { 
var now = Date.now(); 
var delta = now - then; 
functionLoadObjects(); 
window.addEventListener('mousemove', tracker, false); 
console.log(startBtn.x, "Outside of function call startBtn.x"); 
update(delta/1000); 
render(); 
then = now; 
requestAnimationFrame(main); 

};

main 방법의 console 행에 오류가 있습니다. startBtn이 정의되어 있지 않으므로 x 속성에 액세스 할 수 없습니다. 그러나 모든 버튼과 다른 변수들은 js 파일의 머리 부분에 정의되어 있습니다.

Answer 1

$.getScript 비동기 기능입니다 - 그 success 핸들러가 스크립트 파일의 내용은 서버에서 도착 후 실행 - 잘 main이 완료된 후, console.log(startBtn.x, ...가 즉시 실행되는 반면.

var functionLoadObjects = function(callback){ 
    $.getScript('objects.js',function(){ 
    ... your code ... 
    callback(); 
    }); 
} 

var main = function() { 
    var now = Date.now(); 
    var delta = now - then; 
    functionLoadObjects(function() { 
    // put here all code that needs things from dynamically loaded script, such as: 
    console.log(startBtn.x, "Outside of function call startBtn.x"); 
    }); 
};