使用jQuery.getScript（）分配后未定义全局变量

Question

我有几个全局变量; var1, var2，等...

我不立刻实例化这些变量，但我使用jQuery从构造函数实例化它们在一个单独的文件javascript我后来做的。

但是;在我用getScript()进行实例化之后;我尝试访问我新近实例化的对象的属性;

我得到以下错误：

遗漏的类型错误：无法读取属性“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"); 
    }); 
};