Accessing variables in PIXI*

[Freckles]

 this.cursor = new PIXI.Graphics(); 
 /****some code ****/
 this.addChild(this.cursor);

 setInterval(function () {
    this.cursor.alpha = 1;  //alpha is undefined
    setTimeout(function () {
       this.cursor.alpha = 0;
    }, 500);
 }, 1000);


/*************************************************************************************/

 let a = this.cursor = new PIXI.Graphics();
 /****some code ****/
 this.addChild(this.cursor);

 setInterval(function () {
    a.alpha = 1;
    setTimeout(function () {
       a.alpha = 0;
    }, 500);
 }, 1000);

Hey guys, could you please explain why I get ''alpha is undefined'' in the first case and it works alright in the second case? TBH I don't know if this question is pixi related or js related.

 

Also

            this.realInput.setAttribute(
                `style`, `position: relative; opacity: 0`,
                `type`, `password`,
            );
            
            this.realInput.setAttribute(
                `inputmode`, `${this.inputMode}`
            )

////////////////////////////////////////////////////////////////////////////////

            this.realInput.setAttribute(
                `style`, `position: relative; opacity: 0`,
                `type`, `password`,
                `inputmode`, `${this.inputMode}`
            );
            
           

Why is the first case working and the second one doesn't, isn't that the same somehow?

[Exca]

 setInterval(() => {
    this.cursor.alpha = 1;  //alpha is undefined
    setTimeout( ()=> {
       this.cursor.alpha = 0;
    }, 500);
 }, 1000);

You could use arrow functions instead. The scope to which this refers in javascript changes in your first example to functions scope.

For more info on how this gets scoped check out this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Edited June 12, 2020 by Exca
accidentally removed the first part