Confuse with TS and Angular using setTimeoutFunction

Question

I'm trying something very simple with Angular and TS for an Ionic practice. I have a simple button that when clicked changes a text, and then after a few seconds I want that text changed again.

I'm confuse as to why "this.text" wont work depending on how the timeout function is used.

This doesn't work. (this.text is undefined)

export class HomePage {
  constructor() { }

  text = "Default";

  onChangeText() {
    this.text = "Changed!";
    setTimeout(
      this.onBackToDefault
      , 2000);
  }

  onBackToDefault() {
    this.text = "Default";
  }
}

While this works

export class HomePage {
  constructor() { }

  text = "Default";

  onChangeText() {
    this.text = "Changed!";
    setTimeout(() => {
      this.onBackToDefault();
    }
      , 2000);
  }

  onBackToDefault() {
    this.text = "Default";
  }
}

Kurt Hamilton · Accepted Answer · 2020-02-25 15:21:30Z

2

It's because this when used inside a function refers to the function itself. When used in an arrow function, it refers to the outer scope.

In the first example, you are passing in the whole function, whereas you are using an arrow function in the second example.

The first example could also be written in longhand like this:

onChangeText() {
  this.text = "Changed!";
  setTimeout(function () {
    this.onBackToDefault();
//       <------ 'this' is scoped to the anonymous function
  }, 2000);
}

answered Feb 25, 2020 at 15:21

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AlleXyS · Accepted Answer · 2020-02-25 15:28:32Z

1

setTimeout(
  this.onBackToDefault
, 2000);

In this example, the setTimeout method know only elements declared inside it. So, all elements using this. will be undefined.

you need to use setTimeout using pharanteses to can use external parameters:

setTimeout(() => {    
// do stuff    
}, 2000);

edited Feb 25, 2020 at 15:28

answered Feb 25, 2020 at 15:21

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

Collectives™ on Stack Overflow

Confuse with TS and Angular using setTimeoutFunction

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related