Issue with setInterval function execution within an Angular for loop

Question

Issue with setInterval function execution within an Angular for loop

My goal is to dynamically invoke an API at specific intervals. However, when attempting to utilize the following code snippet in Angular 7, I encountered issues with the interval timing. I am seeking a solution for achieving dynamic short polling.

ngOnInit() {
    this.liveFunction();
}

liveFunction() {
    var list = [{
        "id": 1,
        "timer": 10000,
        "url": "https://www.sampleurl.com/1"
    },
    {
        "id": 2,
        "timer": 20000,
        "url": "https://www.sampleurl.com/users/1"
    }];
    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                this.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }
}

invokeAPI (url) {
    //do stuff 
}

javascript angular typescript setinterval

Answer 1

Answer №1

To make this function properly, you will need to incorporate async/await functionality. Here's an example of how you can do it:

async ngOnInit() {
    await this.liveFunction();
}

async liveFunction() {
    var requests = [{
        "id": 1,
        "timer": 10000,
        "url": "https://www.sampleurl.com/1"
    },
    {
        "id": 2,
        "timer": 20000,
        "url": "https://www.sampleurl.com/users/1"
    }];
    
    for (var i = 0, len = requests.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                this.invokeAPI(requests[i].url)
            }, requests[i].timer)
        })(i);
    }
}

invokeAPI(url) {
    // Perform API request
}

Answer 2

To make this function properly, you will need to incorporate async/await functionality. Here's an example of how you can do it:

async ngOnInit() {
    await this.liveFunction();
}

async liveFunction() {
    var requests = [{
        "id": 1,
        "timer": 10000,
        "url": "https://www.sampleurl.com/1"
    },
    {
        "id": 2,
        "timer": 20000,
        "url": "https://www.sampleurl.com/users/1"
    }];
    
    for (var i = 0, len = requests.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                this.invokeAPI(requests[i].url)
            }, requests[i].timer)
        })(i);
    }
}

invokeAPI(url) {
    // Perform API request
}

Answer 3

Answer №2

When using function statements, the scope can be lost as shown below:

    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) { // This function has a different scope, missing the "invokeAPI" method
            setInterval(function () { // Another function scope without the needed method
                this.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }

One way to resolve this issue is by using arrow functions:

      for (var i = 0, len = list.length; i < len; i += 1) {
          ((i: number) => {
            setInterval(() => {
                this.invokeAPI(list[i].url);
            }, list[i].timer)
          })(i);
      }

See a working example here: https://stackblitz.com/edit/angular-hvkkas?file=src/app/app.component.ts

Alternatively, you can store "this" in a variable to access the method from a different scope:

    const _self = this;
    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                _self.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }

Answer 4

When using function statements, the scope can be lost as shown below:

    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) { // This function has a different scope, missing the "invokeAPI" method
            setInterval(function () { // Another function scope without the needed method
                this.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }

One way to resolve this issue is by using arrow functions:

      for (var i = 0, len = list.length; i < len; i += 1) {
          ((i: number) => {
            setInterval(() => {
                this.invokeAPI(list[i].url);
            }, list[i].timer)
          })(i);
      }

See a working example here: https://stackblitz.com/edit/angular-hvkkas?file=src/app/app.component.ts

Alternatively, you can store "this" in a variable to access the method from a different scope:

    const _self = this;
    for (var i = 0, len = list.length; i < len; i += 1) {
        (function (i) {
            setInterval(function () {
                _self.invokeAPI(list[i].url)
            }, list[i].timer)
        })(i);
    }

Issue with setInterval function execution within an Angular for loop

Answer №1

Answer №2

Similar questions

The issue encountered is when the data from the Angular form in the login.component.html file fails to be

Troubleshooting: Why is my console.log not working in JavaScript

Utilizing React Hooks and Firebase Firestore onSnapshot: A guide to implementing a firestore listener effectively in a React application

The lack of a defined theme in the makeStyles for @mui/styles sets it apart from @material-ui/core

Tips for avoiding recursive error function calls in Angular 5

Return either the promise or the actual object inside the switchMap function

Should property paths be shortened by utilizing new variables for better organization?

Encountering the error message "Attempting to access properties of undefined (specifically 'map')". Despite having the array properly declared and imported

Improving a Vue.js notification component with data retrieved from a fetch request result

Is it necessary to unsubscribe from an Angular HTTP-Request when using switchMap?

Error: Unable to access property 'fetch' of null (discord.js)

"Receiving an error message stating 'Was expecting 1 parameter, received 2' while trying to pass a useState function in TypeScript

A guide on implementing Angular-DataTable within a TypeScript project

Importing from source code instead of a file in TypeScript: How to do it

Transfer numerical values from PHP to JavaScript using individual files

jQuery: Implementing smooth horizontal scrolling functionality

Looking for guidance on restructuring a JSON object?

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

Unable to Retrieve Data When Using ASP.NET MVC with Angular

Transferring information to a partial view using a jQuery click event