The Typescript function unexpectedly returns a NaN value even though it should be returning a

Having an issue with my countdown timer function:

startTimer(duration) {
    this.myTimer = duration;
    setInterval(function () {
        this.myTimer--;
        console.log("TIMER: " + typeof(this.myTimer) + " " + this.myTimer);
    }, 1000);
}

When I call it using this.startTimer(60);,

The console.log output shows: TIMER: number NaN. It seems that typeof(this.myTimer) is returning number, but the value is NaN.

Any idea why it's returning NaN?

Just to clarify, I'm using Angular2 (typescript) and I've declared the variable myTimer within the component class before the constructor, as shown below:

export class myComponent {
    myTimer;
    constructor(private navCtrl: NavController) {}
    // other code goes here
}

Answer №1

As Rayon mentioned in the comments, the this inside the setTimeout function callback is different from the this inside the startTimer function. This causes myTimer to not be recognized as a member of it, leading to undefined turning into NaN after the -- operation.

To resolve this issue, you can either utilize the var that = this workaround or switch to an arrow function:

function startTimer(duration) {
    this.myTimer = duration;
    setInterval(() => {
        this.myTimer--;
        console.log("TIMER: "+ typeof(this.myTimer) + " "+this.myTimer);
    }, 1000);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the jQuery function not working as expected? Can't seem to identify any errors in the code?

I'm attempting to capture the essence of moving clouds from this beautiful theme: (I purchased it on themeforest, but it's originally designed for tumblr) Now, I want to incorporate it into my wordpress website here: The code used to be under ...

Issue: Pipe 'AsyncPipe' received an invalid argument '[object Object]'

I’m encountering an issue while attempting to replicate the steps from a specific YouTube tutorial. At the 8:22 mark of this video, I’m facing the following error: Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe&apos ...

Leveraging es6-promise in conjunction with TypeScript 2.1 and ES5 Webpack for streamlined async/await functionality

Utilizing es6-promise with TypeScript version 2.1.1 that targets ES5 and webpack in my project has presented some challenges. app.ts import "es6-promise/auto"; export class Foo { bar() : Promise<string>{ return Promise.resolve("baz"); ...

Retrieving data from the database using getStaticProps in Next.js

As I was following a tutorial on Next.js, the instructor did something that deviated from what I had learned in school and left me pondering. Here is what he did: interface FaqProps { faq: FaqModel[]; } export default function Faq({ faq }: FaqProps) { ...

As I enlarge the font size, the border around the div also expands

Can someone explain why the size of the div border increases along with the font size? If you'd like to see an example, check out this link to a jsFiddle: LINK TO JS FIDDLE: http://jsfiddle.net/krishna22211/m14qms52 ...

"Angluar4 is throwing an error: it's unable to read the property 'iname' of

This is the code snippet from item.ts file:- export interface item{ $key?:string; available?:boolean; countable?:boolean; iname?:string; price?:string; desc?:string; image?:string; } The items component item.componenet.ts looks like this:- import { Com ...

Displaying data on the user interface in Angular by populating it with information from the form inputs

I am working on a project where I need to display data on the screen based on user input received via radio buttons, and apply specific conditions. Additionally, I require assistance in retrieving the id of an object when the name attribute is chosen from ...

Strategies for transferring data between controllers and configuration files in AngularJS

I'm attempting to pass a variable to the angular js config, Here is my JavaScript app: var app = angular.module('myApp', ['ngMaterial', 'sasrio.angular-material-sidenav', 'ui.router']); app.controller('ba ...

The event "subscriptionRemoved" is not being triggered when a password change is made on the Microsoft Graph API

Utilizing the Microsoft Graph API, I have set up subscriptions to receive notifications for calendar events through Node.js. As per the guidelines outlined in the documentation on Enhancing notification reliability for Outlook resources (preview), it speci ...

What steps should I take to resolve the issue with running npm start?

I am encountering an issue while using React and trying to run my application. When I execute "npm run start," I receive the following error message: npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark ...

What is the best way to invoke a custom hook that returns a value within the useEffect hook?

I have a unique situation where I am using a custom hook that returns an object based on the parameter it receives. I now need to modify this behavior by recreating the object with updated parameters within the useEffect function. The challenge is that I c ...

In Firefox, long strings are automatically truncated, while in Google Chrome they display perfectly without any truncation

Here is a block of code where I am using a web service to retrieve a JSON string. It is encapsulated in an XML tag, which I then read and parse with jQuery's parser jQuery.parseJSON(xml.getElementsByTagName("string")[0].firstChild.nodeValue); $.ajax ...

What is the best way to apply attributes to all titles throughout a webpage?

My goal is to locate all elements on the page that have a title attribute and add a new attribute to each of them. For example: <div title='something 1'></div> <p>Test<div title='something 2'></div></p ...

Utilizing requirejs for handling asynchronous callback functions with ajax

If I need to take advantage of the jQuery AJAX API features and customize settings for each ajax call made by my application, it can be done like this: For example, imagine a page that showcases employee information in a table using ajax calls to an API. ...

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...

Tips for maintaining user sessions in Passport.js and PhoneGap: "remembering" a user after logging in

My Node.js server runs on the Sails.js framework, and I've successfully integrated passport.js to handle authentication. Here's how it works: (login)POST /auth/local: Validates credentials and returns ID, Username, and Email address. (register) ...

Leveraging external JSON data in a Jade template with Node.js

Is there a way to successfully pass a Json Object from XMLHttpRequest to my jade file? I am currently experiencing a blank page display and a 500 internal error being sent by the server for the get method. var express = require('express'); var r ...

VueJS Component has trouble refreshing the DOM content following an AJAX Promise

I've encountered issues updating data in my Vue application after an AJAX callback. I have previously resolved similar problems by using Vue.set, but for some reason, it's not working for me today. The only difference is that I am calling a serv ...

What is the method for verifying a password in the login process when it has been hashed by bcrypt during registration?

Currently in the process of developing a signup and login page using Node.js with Pug, Mongoose, and bcrypt. I am encrypting and storing passwords in the database after registration or sign up. I'm facing an issue with the comparison function as it r ...

Angular Protectors: Stop unauthorized access to a URL while allowing authorized refresh

I've developed a Protection feature that blocks users from directly accessing a specific URL, and it's functioning correctly. However, the issue arises when I try to refresh the page as the Protection feature ends up redirecting me. Below is th ...