How to dynamically change the period/delay of an interval for Angular / RxJS

Question

I want to dynamically change the period/delay of an interval, but unfortunately I am not too familiar with Angular, so I am stuck at this part.

Here is my current code:

timeDiffs : number[] = [] <== this is a preprocessed array with the timemeasurements in milliseconds

this.interval$ = interval(this.timeDiffs[this.intervalCounter++]).subscribe(() => {
    //some function calling here
     this.intervalCounter++; // next index for next iteration with a different time
})

Answer 1

You should be able to do this with just concatMap() and timer(). concatMap() guarantee the delays are invoked in correct order only when the previous one completes. timer() will emit once and complete after set delay.

import { from, concatMap, timer } from 'rxjs';

const timeDiffs = [1000, 1000, 3000, 1000];

from(timeDiffs)
  .pipe(
    concatMap(delay => timer(delay)),
  )
  .subscribe(console.log)

Demo: https://stackblitz.com/edit/rxjs-nqyxqk?devtoolsheight=60&file=index.ts