使用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"); 
    }); 
};