Jump to content

Syntax Help


achexi
 Share

Recommended Posts

Hey so I've encountered an issue that pretty much comes down to my lack of knowledge in javascript.

 

I'm trying to do this with the pixi jsonloader:

 

var loader = new PIXI.JsonLoader("data/data.json");
loader.on('loaded', OnLoad);
loader.load();
console.log(this.set1);
------------------------------------------
function OnLoad(evt) {
this.set1 = evt.content.content.json.sets.set1;
console.log(this.set1);
}
 
Essentially I want to be able to address evt.content.content.json.sets.set1 from outside that function. The console log inside the function gives the expected result. The one outside of it is undefined. I'm struggling to find what I need to do to put it in scope. I've tried things like binds but I'm assuming that I'm just using it incorrectly. For all I know I could be going about this the entire wrong way and maybe its stored in a pixi cache or something. Anyone here able to offer some advice? Thanks. 

 

 

Link to comment
Share on other sites

You need some help with scope and 'this" variables.

 

To answer your question : "this" is a reserved keyword in Javascript and is used to reference the object calling the function (to simplify, because it depends of how the function is called)

In your code, your "outside of the function" call to "this" is wrong. You have to declare a variable in the correct scope (outside of your function) and thanks to javascript closure system, you'll be able to access it from inside your function.

 

var loader = new PIXI.JsonLoader("data/data.json");
var that = {};
loader.on('loaded', OnLoad);
loader.load();
console.log(that.set1);
------------------------------------------
function OnLoad(evt) {
that.set1 = evt.content.content.json.sets.set1;
console.log(that.set1);
}
 
the "var" keyword declare a variable is the current scope. If you do not use it, you will declare your variable in the global scope (ie the 'window' object)
 
It means that teh followinf code will work too :
 
var loader = new PIXI.JsonLoader("data/data.json");
loader.on('loaded', OnLoad);
loader.load();
console.log(set1);
------------------------------------------
function OnLoad(evt) {
//first use of the variable "set1", so JS will create it in the global scope
set1 = evt.content.content.json.sets.set1;
console.log(set1);
}
 
Please not that declaring variable in the global scope is not the best choice as you may override variables from third-party plugins.
Note that PixiJS use only the variable "PIXI" as a namespace to avoid that.
 
Read more about the scope system and the 'this' keyword here :  http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
Link to comment
Share on other sites

I was so focused on the "this" that I didn't notice your second mistake : the call to "OnLoad" is asynchronous. So you can't be sure that "OnLoad" has been called when you try to call console.log as line 4.

 

You should stay inside your "OnLoad" function to continue your code (or call another function at the end of it). 

 

This is called a "callback" and with Javascript, you will use them a lot =)

 

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

Link to comment
Share on other sites

Thanks for the above advice. I had actually done almost all of that but it was very insightful none the less as you've actually explained how js's scope works.

I realised my issue was actually me being stupid all along. I forgot that its a callback function and therefore set1 is not immediately set to the value I expected it to be. 

 

Edit: Seems you've ninja posted as I wrote this! Oh well I guess I won't be making this mistake again anytime soon :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...