使用 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 行发现错误；属性x 无法访问，因为startBtn 未定义；但是所有的按钮和其他变量都是在 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");
  });
};