TS TypeScript SetInterval - Cannot access functions from inside the timer target function

Question

I am trying to call a function from inside a timed function called by setInterval().

Here is my code:

export class SmileyDirective
{

FillGraphValues()    
{
    console.log("FillGraphValues works");      // this works
}

MyTimer()
{
    console.log("timer works");      // this works
    this.FillGraphValues();          // this does not work
    FillGraphValues();               // this does not work
}

draw()
{
    this.FillGraphValues();    // this works

    setInterval(this.MyTimer, 1000);
}
}

The App crashes with either:

"this.FillGraphValues is not a function"

or

Cannot find name 'FillGraphValues'. Did you mean the instance member 'this.FillGraphValues'?

I even tried:

setInterval(function(){MyTimer()}, 1000);

and

setInterval(function(){this.MyTimer()}, 1000);

But they didn't work.

Many Thanks :)

`this.FillGraphValues(); // this does not work` do you mean call of MyTimer() within setInterval callback? — Suraj Rao, Apr 13 '17 at 07:17
Try `this.myTimer.bind(this)` Issue is `setTimeout/setInterval` only registers event at designated time and hence context is lost — Rajesh, Apr 13 '17 at 07:18
Possible duplicate of [How to access the correct \`this\` inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Rajesh, Apr 13 '17 at 07:19

Digvijay · Accepted Answer · 2017-04-13T09:22:34.717

Maybe this would work: setInterval(() => {this.MyTimer()}, 1000);

so code looks like this :

export class SmileyDirective {

    FillGraphValues() {
        console.log("FillGraphValues works");      // this works
    }

    MyTimer() {
        console.log("timer works");      // this works
        this.FillGraphValues();          // this DOES work
    }

    draw() {
        this.FillGraphValues();    // this works

        setInterval(() => { this.MyTimer() }, 1000);
    }
}

var obj = new SmileyDirective();
obj.draw();

this transpiles cleanly to:

define(["require", "exports"], function (require, exports) {
    "use strict";
    var SmileyDirective = (function () {
        function SmileyDirective() {
        }
        SmileyDirective.prototype.FillGraphValues = function () {
            console.log("FillGraphValues works"); // this works
        };
        SmileyDirective.prototype.MyTimer = function () {
            console.log("timer works"); // this works
            this.FillGraphValues(); // this does not work
        };
        SmileyDirective.prototype.draw = function () {
            var _this = this;
            this.FillGraphValues(); // this works
            setInterval(function () { _this.MyTimer(); }, 1000);
        };
        return SmileyDirective;
    }());
    exports.SmileyDirective = SmileyDirective;
    var obj = new SmileyDirective();
    obj.draw();
});

The part to notice is

 var _this = this;
            this.FillGraphValues(); // this works
            setInterval(function () { _this.MyTimer(); }, 1000);

which essentially preserves the context by saving the this variable in closure and using it when the setInterval invokes the function.

TS TypeScript SetInterval - Cannot access functions from inside the timer target function

1 Answers1