Variable and callback function

[Aod]

Hi!

Could you help me?

The problem:

There is a class (singleton), where I load assets by

loader

 .add("assets/slotParams.json")

.load(this.setup);

In this callback function “setup” I change boolean variable from false to true, but when I want to get it from other class, there are no changes. How can it be?

Of course graphics show good.

 The example of code:

(class with graphics and changed variable "lp"):

class Graph
{	
    private bit:Bitte;
    private lp:boolean;	//variable that should be change
    get loadedProcess():boolean 
    {	 return this.lp;    }
    set loadedProcess(res:boolean) 
    {    this.lp = res;    }
    
	//stage & engine parts
	public Container;
	public autoDetectRenderer;
	public loader;
	public resources;
	public TextureCache;
	public Texture;
	public Sprite;
	public Text;
	public Graphics;
	public stage:PIXI.Container;	
	
	private static instance:Graph;
	private static ok2Create:Boolean=false;
	public static getInstance():Graph
	{
            if(!this.ok2Create)
            {
                this.instance = new Graph();
                this.ok2Create=true;
            }        
            return this.instance;
	}
	
	private constructor()
	{	
        this.loadedProcess=false;
        	
        Container = PIXI.Container;
        autoDetectRenderer = PIXI.autoDetectRenderer;
		loader = PIXI.loader;
		resources = PIXI.loader.resources;
		TextureCache = PIXI.utils.TextureCache;
		Texture = PIXI.Texture;
		Sprite = PIXI.Sprite;
		Text = PIXI.Text;
		Graphics = PIXI.Graphics;

		stage = new Container(); 
		renderer = autoDetectRenderer(1140, 768);

		renderer.backgroundColor = 0xFFFFFF;
		document.body.appendChild(renderer.view);

	}
        
    public loading():void
    {
            loader
		  .add("assets/slotParams.json")
		  .load(this.setup);
    }
        	
    private setup():void //callback function
    {
         this.loadedProcess=true; //not worked when asked this var from another class
    }
}

 Class with asking for this variable (in alert I take "false" each time);

class AssetsLoader
{
    private graph:Graph;
    private timme:number;   

    constructor()
    {
        this.graph=Graph.getInstance();
        this.timme=1;
    }  

    public goLoad():void
    {
        if (this.timme==1)
        {
            this.timme=2; 
            this.graph.loading(); 
        }

        if (this.timme==2)
        {
            alert("assets loader this.graph.loadedProcess="+this.graph.loadedProcess);
            if (this.graph.loadedProcess)
            {
                alert("win");
                this.timme=3;
            }
        }

        if (this.timme==3) 
        {   
        }  
}

function goLoad() loop.

Thank you in any case.

[mattstyles]

I'm not exactly clear how TypeScript is mangling this all up but,

`loadedProcess` is a function, it must be invoked with `this.graph.loadedProcess()` in order to execute and return the value of the `lp` variable.

It returns truthy as it exists, and in JS existence is truthy so your `if (this.graph.loadedProcess)` block always executes.

[Aod]

mattstyles, thank you.

But I tried this points. Even if I make not a getter/setter but just a variable it returns "false" (always false).

In javascript translation it looks something like this (this is variant without getter/setter, only variable "loadedProcess"):

var Graph = (function () {
    function Graph() {
        this.loadedProcess = false;
        Container = PIXI.Container;
        autoDetectRenderer = PIXI.autoDetectRenderer;
        loader = PIXI.loader;
        resources = PIXI.loader.resources;
        TextureCache = PIXI.utils.TextureCache;
        Texture = PIXI.Texture;
        Sprite = PIXI.Sprite;
        Text = PIXI.Text;
        Graphics = PIXI.Graphics;
        stage = new Container();
        renderer = autoDetectRenderer(1140, 768);
        renderer.backgroundColor = 0xFFFFFF;
        document.body.appendChild(renderer.view);
    }
    Graph.getInstance = function () {
        if (!this.ok2Create) {
            this.instance = new Graph();
            this.ok2Create = true;
        }
        return this.instance;
    };
    Graph.prototype.loading = function (str) {
        loader
            .add(str)
            .load(this.setup);
    };
    Graph.prototype.setup = function () {
        this.loadedProcess = true;
        alert("this.loadedProcess=" + this.loadedProcess);
    };
    Graph.prototype.rending = function () {
        renderer.render(stage);
    };
    Graph.prototype.go = function () {
    };
    return Graph;
}());
Graph.ok2Create = false;

 

[ivan.popelyshev]

.add(this.setup.bind(this))

//or

.add(() => { this.setup() })

Functions have to be binded, they dont know which "this" to use when they are called. In this code, loader supplies itself as "this", so you set "loader.loadedProcess=true" and not "graph.loadProcess=true".

That's JS problem. Either you make a closure, either you bind "this" to the function.

[Aod]

ivan.popelyshev, thanks a lot!

".load(this.setup.bind(this)); " work now.

[ivan.popelyshev]

@Aod "like" my comment, then  Glad that worked for you.