Angular - Execute function every 30 seconds while considering the duration of the function execution

Question

Angular - Execute function every 30 seconds while considering the duration of the function execution

In my Angular 7 application, I am utilizing RxJS to handle asynchronous operations.

My goal is to retrieve a list of items from an API endpoint every 30 seconds. However, there are times when the request may take longer than expected, and I want to ensure that the next call accounts for this delay.

For example, if the initial request takes 10 seconds to complete, I wish to make the subsequent request after 40 seconds (30 + 10), instead of just 20 seconds (30 - 10).

I have attempted to achieve this using the following code:


fetchList() {
   this.service.fetchListFromHttp()
      .pipe(
        finalize(() =>
          setTimeout(() => {
            this.fetchList();
          }, 30000)
        )
      )
      .subscribe(
         result => this.list = result,
         err => this.logError(err)
      );
}

However, I have noticed strange behavior where the function gets called at irregular intervals like every 10 seconds or 20 seconds, rather than consistently every 30 seconds as anticipated. I expect the interval between calls to always be greater than 30 seconds.

javascript angular typescript rxjs

Answer 1

Answer №1

If you are the one who developed the backend, using socket.io may be the solution you're looking for to connect to your own backend.

Consider exploring the capabilities of RxJS which is integrated with Angular. With RxJS, you can achieve tasks like fetching data and pausing in between.

One approach could be:

this.service.fetchInfoFromHttp().pipe(delay(30 * 60 * 10000), () => ...), repeat(Infinity))

For more information on RxJS, refer to the following documentation links:

RxJS delay

RxJS repeat

Socket.io

EDIT: How Can I make a Timer using an observable in Angular 9

EDIT AGAIN:

Appreciate your input @goga-koreli, debounce feature might be suitable

https://www.learnrxjs.io/learn-rxjs/operators/filtering/debounce

Answer 2

If you are the one who developed the backend, using socket.io may be the solution you're looking for to connect to your own backend.

Consider exploring the capabilities of RxJS which is integrated with Angular. With RxJS, you can achieve tasks like fetching data and pausing in between.

One approach could be:

this.service.fetchInfoFromHttp().pipe(delay(30 * 60 * 10000), () => ...), repeat(Infinity))

For more information on RxJS, refer to the following documentation links:

RxJS delay

RxJS repeat

Socket.io

EDIT: How Can I make a Timer using an observable in Angular 9

EDIT AGAIN:

Appreciate your input @goga-koreli, debounce feature might be suitable

https://www.learnrxjs.io/learn-rxjs/operators/filtering/debounce

Answer 3

Answer №2

To enhance the solution provided by SVNTY, you can implement it in the following way:

retrieveData() {
  const processAndWait = (data) => interval(30000).pipe(
    take(1),
    ignoreElements(), // necessary to disregard interval numbers
    startWith(data),
  )

  // fetch data from network, pass it to subscriber, and wait for specified time
  // repeat will trigger a new iteration when interval completes with take(1)
  this.service.fetchDataFromHttp().pipe(
    concatMap((data) => processAndWait(data)),
    repeat(Infinity), 
  ).subscribe();
}

Answer 4

To enhance the solution provided by SVNTY, you can implement it in the following way:

retrieveData() {
  const processAndWait = (data) => interval(30000).pipe(
    take(1),
    ignoreElements(), // necessary to disregard interval numbers
    startWith(data),
  )

  // fetch data from network, pass it to subscriber, and wait for specified time
  // repeat will trigger a new iteration when interval completes with take(1)
  this.service.fetchDataFromHttp().pipe(
    concatMap((data) => processAndWait(data)),
    repeat(Infinity), 
  ).subscribe();
}

Answer 5

Answer №3

Implement the use of observables from rxjs by following this tutorial

import { interval, Subject, PartialObserver, Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

Once you have imported the necessary libraries, set the interval to 30 and start it. When it finishes, call your service and then restart the interval when the service gets the result.

ispause = new Subject();
private time = 30;
timer: Observable<number>;
timerObserver: PartialObserver<number>;

ngOnInit(){
    this.timer = interval(1000)
      .pipe(
        takeUntil(this.ispause)
      );    
    this.timerObserver = {
      next: (_: number) => {  
         if(this.time == 0){
           this.ispause.next;
           this.callservice();   
         }
         this.time -= 1;        
      }
    };
    this.timer.subscribe(this.timerObserver);    
}

callservice(){
  // Once data is retrieved
  this.service.fetchListFromHttp()
      .pipe(
        finalize(() =>
          this.time = 30;
          this.timer.subscribe(this.timerObserver);
        )
      )
      .subscribe(
         result => this.list = result,
         err => this.logError(err)
      );

 }

Answer 6

Implement the use of observables from rxjs by following this tutorial

import { interval, Subject, PartialObserver, Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

Once you have imported the necessary libraries, set the interval to 30 and start it. When it finishes, call your service and then restart the interval when the service gets the result.

ispause = new Subject();
private time = 30;
timer: Observable<number>;
timerObserver: PartialObserver<number>;

ngOnInit(){
    this.timer = interval(1000)
      .pipe(
        takeUntil(this.ispause)
      );    
    this.timerObserver = {
      next: (_: number) => {  
         if(this.time == 0){
           this.ispause.next;
           this.callservice();   
         }
         this.time -= 1;        
      }
    };
    this.timer.subscribe(this.timerObserver);    
}

callservice(){
  // Once data is retrieved
  this.service.fetchListFromHttp()
      .pipe(
        finalize(() =>
          this.time = 30;
          this.timer.subscribe(this.timerObserver);
        )
      )
      .subscribe(
         result => this.list = result,
         err => this.logError(err)
      );

 }

Angular - Execute function every 30 seconds while considering the duration of the function execution

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble passing a jQuery variable containing a string value to PHP through the jQuery AJAX function?

Create a custom button in Material-UI using Styled-components, and integrate it with React

The alert feature does not seem to be functioning properly when displaying error messages

Unable to display content on the ejs file

Please enter a numerical value into the input field in a JavaScript form

Set up an event listener for a specific class within the cells of a table

express.static() fails to serve files from public directories when accessed via router paths other than "/"

The custom component is not updating the NgIf directive in HTML even though it receives a boolean variable

NuxtJS (Vue) loop displaying inaccurate information

The AJAX request encountered an error due to an Unexpected End of JSON Input

Node.js unleashes the power of Ajax

transforming an array of undefined values into an array of strings

Is the Scope Staying Static in AngularJS 1.4 when Input Text Changes and Two-Way Binding is Enabled?

JavaScript Empty Input Field when Duplicating Node

Express.js never terminates a session

Is there a way for me to adjust the typography background based on its current status?

Troubleshooting JavaScript: Dealing with JSON Import Issues Involving Arrays of Objects

The tweet button feature does not give users the ability to make changes to the content

Utilizing an object's value as a key for a separate object

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be