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

Tips for keeping a div element at the top of the page

Continuous loop of Vue countdown timer

organizing strings in alphabetical order using TypeScript

No routes found to match. URL Segment: ''. This issue occurs when attempting to utilize child routes with Angular 2

Despite the onsubmit returning false, the submit operation still goes through

Alert: Angular has detected that the entry point '@libray-package' includes deep imports into 'module/file'

Setting up the customized filename for precompiled Handlebars templates

The Angular parent component is able to detect changes in the ng-content child component

Issues have been identified with the capabilities of Vue's Mutations and Actions

Version 13 of the Discord slash command encounters an "interaction failed" error

Traverse through an array of objects with unspecified length and undefined key names

fresh map from Google: Coordinates LatLng may not be a number, but my hunch tells me it is

An issue occurred: the channel has been terminated within the ChildProcess.target.send function at internal/child_process.js, line 562, character

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

The $or operator in mongoose falls short in providing complete data when paired with the find() method

Preserve the timestamp of when the radio query was chosen

Conceal the block quotes while substituting with a newline

Looping through a JSON array and encoding it using the `

Tips for sorting the mat table dataSource by inputting two columns and selecting the search button

Modifying Selectize Ajax data in real-time