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