Use (this.) in timeout ? [solved]

[Jonforum]

hi why i have error on my timeout when i call my object
$gameVariables.Hud_Option.Move(); ??
am try set timer after stuff will call method DeletePicture()

Uncaught TypeError: undefined is not a functionANFT_Hud_option.js:129 (anonymous function)

have object in example

$gameVariables.Hud_Option{
this.Timer1 = null; //Timer container

// Function remove picture
this.DeletePicture = function(){
        for (var d=this.Pid;d<this.EndPid;d++){
            $gameScreen._pictures[d] = null; }}


// The function with the timer
this.Move = function () {
// do stuff
//after stuff
this.Timer1 = setTimeout(function(){ this.DeletePicture() }, 3000);
}
}

 

[Hudell]

In javascript, this means the current method. Since you created another function for the setTimeout, the "this" from inside it is different than the one from outside it.
You can simply assign the outer this to another variable:

var that = this;
this.Timer1 = setTimeout(function(){ that.DeletePicture() }, 3000);

Another option is to bind the new function to the same context.

 

[LTN Games]

or if you write your code in ES6 like me it's as simple as using the fat arrow.

this.Timer1 = setTimeout(() =>{ this.DeletePicture() }, 3000);

 

[Jonforum]

or if you write your code in ES6 like me it's as simple as using the fat arrow.

this.Timer1 = setTimeout(() =>{ this.DeletePicture() }, 3000);

Am not using es6 but good to know

In javascript, this means the current method. Since you created another function for the setTimeout, the "this" from inside it is different than the one from outside it.
You can simply assign the outer this to another variable:
.

yes lol i just found related post with information.
http://stackoverflow.com/questions/2130241/pass-correct-this-context-to-settimeout-callback

I need to save a reference to the context
its work now thanks a lot.

In fact my idea is to purge the images of the option menu after X number of time not called, to release a bit of memory.

Spoiler

//################### FUNCTION PRELOADING #####################################################################//
    // $gameVariables.Hud_Option.Preload();
    this.Preload = function () {
        if (this.Status===true) {return;} // STOP SI IMAGE DEJA PRELOADED
        var PID = this.GetPid(); // GET THE PICTURE ID
        this.SetPosition('HideXY'); //  RECONSTRUIT POSITION FINAL
        ///////////////////////////////////////////////////////////////////////////
         for (var I=0,R=0;I<7;I++,R++){ // LARGE STATES
            $gameScreen.showPicture(PID++, 'hud-Option-bg', [0.2,0.5], this.OSBGxy[0], this.OSBGxy[1]+(this.SDxy*R), 100, 100, 255, 0); //#d8a757 OPTION SLOT BG
            $gameScreen.showPicture(PID++, 'hud-Option-bg-'+I, [0.2,0.5], this.OSCSxy[0], this.OSCSxy[1]+(this.SDxy*R), 100, 100, 255, 0); //#ac0827 OPTION COLOR SLOT
            $gameScreen.showPicture(PID++, 'z', 0, this.OST[0], this.OST[1]+(this.SDxy*R), 100, 100, 255, 0); //#dfdfdf OPTION SLOT TEXT
            $gameScreen.picture(PID - 1).setPixiText(this.OptionName[I]); //#dfdfdf OPTION SLOT TEXT
            $gameScreen.picture(PID - 1).setPixiTextStyle(this.TextStyle1); //#dfdfdf OPTION SLOT TEXT
            $gameScreen.showPicture(PID++, 'hud-Option-circle', 1, this.OIxy[0], this.OIxy[1]+(this.SDxy*R), 100, 100, 255, 0); //#7f30bb OPTION ICON CIRCLE
            $gameScreen.rotatePicture(PID - 1, 0.3);//#7f30bb OPTION ICON CIRCLE ROTATION
            $gameScreen.showPicture(PID++, 'Slider-menue-'+I, 1, this.OIxy[0], this.OIxy[1]+(this.SDxy*R), 100, 100, 255, 0); //#4c118f OPTION ICONS
         }
        // GIVE FINALPID IF FIRT TIME CONSTRUCTOR
        if (this.EndPid === null) { this.EndPid = PID; return PID; } // renvoi le pid final pour le boot si besoin
    }
    //################### FUNCTION PRELOADING #####################################################################// END
    //################### FUNCTION MOVING ANIMATION #####################################################################//
    //################### FUNCTION MOVING ANIMATION #####################################################################//
    // $gameVariables.Hud_Option.Move('HideXY',25); ,  $gameVariables.Hud_Option.Move('MapBaseXY',25);
    this.Move = function (WhereTo,TIME) {
        var PID = this.GetPid(); // GET THE PICTURE ID
        this.PositionMode = WhereTo; //SET POSITION MODE
        this.SetPosition(WhereTo); //  RECONSTRUIT POSITION FINAL SELON CONTEX (HideXY,MapBaseXY,SelectOptionXY....)
        this.RequestStopAnimation1(); //STOP ALL ANIMATION
        this.AniContainer1 = []; // RESET ANIMATION CONTAINER
        var thas = this; //SAVE REFERENCE.
 
        // { _x:0 ,_y:0 ,_angle:0 ,_scaleX:0 ,_scaleY:0 ,_opacity:0 }
        // EaseType::  quad  cubic  quart  quint  sine  exp  circ  elastic  back  bounce // EaseMode::  in  out  inOut
        if (WhereTo === 'MapBaseXY') {
        //%%%%%%%%%%%%%%%%%%%%% IF MapBaseXY XY %%%%%%%%%%%%%%%%%%%%%///
        clearTimeout(this.Timer1);//STOP LE TIMER EFFACEMENT
        for (var I=0,R=0;I<7;I++,R++){ // LARGE STATES
        this.MoveAni1(PID++, { _x: this.OSBGxy[0], _y: this.OSBGxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'out', TIME, 0); //#d8a757 OPTION SLOT BG
        this.MoveAni1(PID++, { _x: this.OSCSxy[0], _y: this.OSCSxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'out', TIME, 5); //#ac0827 OPTION COLOR SLOT
        this.MoveAni1(PID++, { _x: this.OST[0], _y: this.OST[1]+(this.SDxy*R), _angle: 0 }, 'back', 'out', TIME, 8); //#dfdfdf OPTION SLOT TEXT
        this.MoveAni1(PID++, { _x: this.OIxy[0], _y: this.OIxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'out', TIME, 1.5*I); //#7f30bb OPTION ICON CIRCLE
        this.MoveAni1(PID++, { _x: this.OIxy[0], _y: this.OIxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'out', TIME, 1.2*I); //#4c118f OPTION ICONS
        }
        } else if (WhereTo === 'HideXY') {
        //%%%%%%%%%%%%%%%%%%%%% IF HideXY XY %%%%%%%%%%%%%%%%%%%%%///
        for (var I=0,R=0;I<7;I++,R++){ // LARGE STATES
        this.MoveAni1(PID++, { _x: this.OSBGxy[0], _y: this.OSBGxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'in', TIME/3, 0); //#d8a757 OPTION SLOT BG
        this.MoveAni1(PID++, { _x: this.OSCSxy[0], _y: this.OSCSxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'in', TIME/2, 0); //#ac0827 OPTION COLOR SLOT
        this.MoveAni1(PID++, { _x: this.OST[0], _y: this.OST[1]+(this.SDxy*R), _angle: 0 }, 'back', 'in', TIME, 0); //#dfdfdf OPTION SLOT TEXT
        this.MoveAni1(PID++, { _x: this.OIxy[0], _y: this.OIxy[1]+(this.SDxy*R), _angle: 0 }, 'back', 'in', TIME/2, 0); //#7f30bb OPTION ICON CIRCLE
        this.MoveAni1(PID++, { _x: this.OIxy[0], _y: this.OIxy[1]+(this.SDxy*R), _angle: 720 }, 'back', 'in', TIME/1.5, 0); //#4c118f OPTION ICONS
    }
    this.Timer1 = setTimeout(function(){ thas.DeletePictures(); }, 3000);

        }
    }