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.

show the code. do you provide success callback in your getScript call and does it execute? — Igor
– Igor, Commented Oct 9, 2014 at 3:30

Igor · Accepted Answer · 2014-10-09 03:43:06Z

3

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

edited Oct 9, 2014 at 3:43

answered Oct 9, 2014 at 3:37

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tukajo Over a year ago

Is there anyway to assure it starts/finishes first?

Tukajo Over a year ago

Only problem I envision with that is that my main method has calls to the other vars that are being instantiated by my functionLoadObjects method.

Tukajo Over a year ago

So regardless; when my main method calls the update and render there will still be problems...

Ja͢ck Over a year ago

@Tukajo So add those calls inside the callback function as well.

Tukajo Over a year ago

If I put all those methods inside of the callback; wouldn't it defeat the point of trying to compartmentalize my objects and their constructors into another script?

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related