How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

Question

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

I've been attempting to invoke a function from within a timed function called by setInterval().

Here's the snippet of my code:

export class SmileyDirective
{

FillGraphValues()    
{
    console.log("The FillGraphValues function works as expected");      // this works
}

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

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

    setInterval(this.MyTimer, 1000);
}
}

The application 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 unfortunately, none of these approaches worked.

Your assistance would be greatly appreciated! :)

javascript typescript setinterval

Answer 1

Answer №1

Perhaps this approach could be successful: setInterval(() => {this.MyTimer()}, 1000);

thus, the code would appear as follows:

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 conversion produces clean output:

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 critical element to focus on is

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

essentially maintaining the context by saving the this variable in closure and utilizing it when the setInterval triggers the function.

Answer 2

Perhaps this approach could be successful: setInterval(() => {this.MyTimer()}, 1000);

thus, the code would appear as follows:

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 conversion produces clean output:

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 critical element to focus on is

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

essentially maintaining the context by saving the this variable in closure and utilizing it when the setInterval triggers the function.

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

Answer №1

Similar questions

What is the method for retrieving array values from an attribute?

The functionality of the Bootstrap toggle button seems to be malfunctioning

Add the hue value from Hue into the Chromajs HSL state value

The express app is configured to send a 301 status code when Supertest is used, and it is

Place a hook following the storage of a variable in the device's memory

acquiring JSON information from different domains

AccessMediaStream - camera direction

`Is there a way to sort a deeply nested object by its values?`

The callback function is not responding properly in my HTTP POST request

How come I'm facing difficulties when trying to send a post request to my WebApi using AngularJS's POST method?

Retrieve the data from an HTTP Request using AngularJS

Using local variables in NodeJS callbacks

Congratulations! Your product has been successfully added to Magento using Ajax

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

The class 'ConsoleTVsChartsCharts' could not be located

Issue with comparing equality to zero

"Troubleshooting: Fixing the 'Firebase Cloud Function admin reference is not a function'

Tips on obtaining the element that was used as the event selector

Unable to input characters consecutively into the text field because it is being displayed as a distinct function within the component

Menu Options in Material UI Navbar