Global variables undefined after using jQuery.getScript() to assign

Question

I have several global variables; var1, var2, etc...

I do not immediately instantiate these variables but I do later on using jQuery to instantiate them from a constructor in a separate javascript file I have.

However; after I do this instantiation with the getScript(); and I try and access the properties of my newly instantiated objects;

I get the following error:

Uncaught TypeError: Cannot read property 'x' of undefined

Is there a reason; or can you not instantiate global variables this way?

Code for 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);

    })
};

Main method:

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);

};

Error is found on the console line in the main method; the property x cannot be accessed since startBtn is undefined; however all of the buttons and other vars are defined at the head of the js file.

Answer 1

$.getScript is an asynchronous function - its success handler executes after the content of your script file arrives from the server - well after main finishes, whereas console.log(startBtn.x, ... is executed immediately.

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