What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

Question

What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

I can't seem to figure out why using the function name in setInterval is causing issues, while passing an anonymous function works perfectly fine.

In the example that's not working (it's logging NaN to the console and before the first call, this.counter++ returns undefined as it couldn't find the variable?)

export class MyClassName {
 counter = 0;

 startInterval(){
   setInterval(this.myFunc , 1000)
 }

 myFunc(){
   this.counter++;
   console.log(this.counter)
 }
}

However, when changing startInterval like below, it works correctly

startInterval(){
  setInterval(() => this.myFunc() , 1000)
}

And in the HTML we have:

<button (click)="startInterval()">Start</button>

javascript typescript setinterval

Answer 1

Answer №1

When passing in a function reference without executing it, as shown in the first example, the function runs in the global context where `this` is either undefined or refers to the `Window` object. This can be confirmed by logging the value of `this.constructor.name`:

class MyClassName {
 counter = 0;

 // A function name is passed in but not executed yet.
 // It will be run globally by setInterval.
 startInterval(){
   setInterval(this.myFunc, 1000)
 }

 myFunc(){
   // When running in a global context, `this` no longer points to our instance.
   console.log(this.constructor.name);
   this.counter++;
   console.log(this.counter)
 }
}

const mc = new MyClassName();

mc.startInterval();

The second example demonstrates that arrow functions capture the `this` from where they are declared, not where they are executed. Therefore, even though the arrow function will run in the global context, the `this` of the class is retained below:

class MyClassName {
 counter = 0;

 // Arrow functions take the `this` from where they are declared.
 // Thus, the `this` of the class is preserved here, despite the arrow function
 // running in the global context.
 startInterval(){
   setInterval(() => this.myFunc(), 1000);
 }

 myFunc(){
   console.log(this.constructor.name);
   this.counter++;
   console.log(this.counter)
 }
}

const mc = new MyClassName();

mc.startInterval();

A detailed explanation of how `this` behaves with `setInterval` and arrow functions can be found in the MDN documentation on arrow functions.

Answer 2

When passing in a function reference without executing it, as shown in the first example, the function runs in the global context where `this` is either undefined or refers to the `Window` object. This can be confirmed by logging the value of `this.constructor.name`:

class MyClassName {
 counter = 0;

 // A function name is passed in but not executed yet.
 // It will be run globally by setInterval.
 startInterval(){
   setInterval(this.myFunc, 1000)
 }

 myFunc(){
   // When running in a global context, `this` no longer points to our instance.
   console.log(this.constructor.name);
   this.counter++;
   console.log(this.counter)
 }
}

const mc = new MyClassName();

mc.startInterval();

The second example demonstrates that arrow functions capture the `this` from where they are declared, not where they are executed. Therefore, even though the arrow function will run in the global context, the `this` of the class is retained below:

class MyClassName {
 counter = 0;

 // Arrow functions take the `this` from where they are declared.
 // Thus, the `this` of the class is preserved here, despite the arrow function
 // running in the global context.
 startInterval(){
   setInterval(() => this.myFunc(), 1000);
 }

 myFunc(){
   console.log(this.constructor.name);
   this.counter++;
   console.log(this.counter)
 }
}

const mc = new MyClassName();

mc.startInterval();

A detailed explanation of how `this` behaves with `setInterval` and arrow functions can be found in the MDN documentation on arrow functions.

Answer 3

Answer №2

The issue lies in the usage of the this keyword. When it comes to JavaScript, anonymous or arrow functions do not establish a reference for this to point back to the function caller. On the other hand, a traditional function created with the function keyword will keep track of the caller within this.

As a result, in the first scenario, startInterval() is triggered by the button element, which does not possess a counter variable. Meanwhile, in the second scenario, the this keyword points to the external scope's this, specifically the window object. It can be assumed that MyClassName is generated under the window object, hence the presence of the counter.

If you'd like to delve deeper into this topic, check out:

Answer 4

The issue lies in the usage of the this keyword. When it comes to JavaScript, anonymous or arrow functions do not establish a reference for this to point back to the function caller. On the other hand, a traditional function created with the function keyword will keep track of the caller within this.

As a result, in the first scenario, startInterval() is triggered by the button element, which does not possess a counter variable. Meanwhile, in the second scenario, the this keyword points to the external scope's this, specifically the window object. It can be assumed that MyClassName is generated under the window object, hence the presence of the counter.

If you'd like to delve deeper into this topic, check out:

Answer 5

Answer №3

The reason for the error is that your use of this is causing the function to be called, resulting in myFunc being undefined. To understand more about the context of this, you can refer to resources like this article and this one.

You can confirm this issue by logging this.myFunc. A similar problem may occur with this.counter if it is accessed.

let counter = 0;

const startInterval = () => {
  // Results in undefined as it does not exist.
  console.log(this.myFunc);
  setInterval(this.myFunc, 1000);
};

startInterval();

const myFunc = () => {
  this.counter++;
  console.log(this.counter);
};

To resolve this issue, rearrange the functions and eliminate references to this in your code.

let counter = 0;

const myFunc = () => {
  counter++;  // Also remove 'this' from here.
  console.log(counter);
};

const startInterval = () => {
  // Now defined, so it will work correctly.
  setInterval(myFunc, 1000);
};

startInterval();

Answer 6

The reason for the error is that your use of this is causing the function to be called, resulting in myFunc being undefined. To understand more about the context of this, you can refer to resources like this article and this one.

You can confirm this issue by logging this.myFunc. A similar problem may occur with this.counter if it is accessed.

let counter = 0;

const startInterval = () => {
  // Results in undefined as it does not exist.
  console.log(this.myFunc);
  setInterval(this.myFunc, 1000);
};

startInterval();

const myFunc = () => {
  this.counter++;
  console.log(this.counter);
};

To resolve this issue, rearrange the functions and eliminate references to this in your code.

let counter = 0;

const myFunc = () => {
  counter++;  // Also remove 'this' from here.
  console.log(counter);
};

const startInterval = () => {
  // Now defined, so it will work correctly.
  setInterval(myFunc, 1000);
};

startInterval();

What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

Answer №1

Answer №2

Answer №3

Similar questions

"Seeking clarification on submitting forms using JQuery - a straightforward query

Disabling the default validation message in HTML form inputs

Are there alternative methods for handling routes in React, other than using the react-router-dom@latest library?

The Ghostly Glare of Doom: Ionic 2 Strikes on Android

Changing a DOM structure into pure HTML using JavaScript

Stopping a build programmatically in Next.js involves implementing specific steps that aim to halt

mysterious supplier factoryprovider <- factory <- angular js controller

express has a req.body that is devoid of any content

Check for length validation including spaces in JavaScript

Generating instances of classes using variables in Typescript

Angular-ui-bootstrap modal failing to display provided data

What is the best way to wrap a call to XMLHttp Request within a $q promise?

Alignment issue with ThreeJS Collada file

What is the best way to refresh a single component in my application without causing the other components to reload?

The synergy of Redux with scheduled tasks

I'm having some trouble with my jQuery.get() function in the javascript Saturday(), can anyone help me figure out what I'm doing wrong?

Typescript encounters a failure in typing when an object is destructured

encountering difficulties calling setAttribute within a function

What is the best way to choose the current Div's ID, as well as its Width and Height properties?

Determining If a setInterval Function is the Sole Factor Preventing an App from Exiting