Rxjs Interval switchMap once http call finishes - rxjs

Question

We have a timer that ticks e.g. every 2 seconds, whenever there is a tick we make a http call. The response time varies, it might be 100 ms but it might be 4 seconds. The catch is that we only make a new http call if the previous one completed. So we have 2 cases:
#1 If each http call takes 10sec we should be only sending a request every 10 seconds.
#2 If each http call takes 100ms we should be sending a request every 2 seconds.
What is also difficult in this scenario is that the getHttp call relies on value from the interval$ stream.
The best solution I came up so far is this:
import { of, interval, timer, combineLatest, BehaviorSubject } from 'rxjs';
import { filter, map, switchMap, tap } from 'rxjs/operators';
const interval$ = interval(2000).pipe(tap(console.log))
const readyForNext$ = new BehaviorSubject(true);
// Mocked http request that (in reality) uses the value from interval$
function getHttp(value) {
return of(value).pipe(
tap(() => readyForNext$.next(false)),
tap(() => console.log('getHttp: starting ')),
switchMap(() => timer(3000)),
tap(() => console.log('getHttp: resolve')),
map(() => 'hello'),
);
}
const anotherMockedStream$ = of(1) // In real code we have 2 streams in combineLatest
combineLatest([interval$, readyForNext$])
.pipe(
filter(([_, isReady]) => isReady),
switchMap(([value]) => {
return combineLatest([getHttp(value), anotherMockedStream$])
}),
tap(() => readyForNext$.next(true)),
)
.subscribe(console.log);
Playground: https://playcode.io/1023332
Alternative playground: https://stackblitz.com/edit/typescript-jdjjsc?file=index.ts
There are however two problem with this solution, it only works for case #1 and it is not very elegant (the use of readyForNext$). How to improve this code?

Answer 1

Thanks to #martin for pointing to exhaustMap, this is the correct operator for the operation, it seems to me that it is similar to switchMap but only does the switch once the steam is completed (or the emitted value reaches the subscription).
The working code looks as follows:
import { of, interval, timer, combineLatest } from 'rxjs';
import { map, switchMap, tap, exhaustMap } from 'rxjs/operators';
const interval$ = interval(2000).pipe(tap(console.log))
// Mocked http request that (in reality) uses the value from interval$
function getHttp(value) {
return of(value).pipe(
tap(() => console.log('getHttp: starting ')),
switchMap(() => timer(3000)),
tap(() => console.log('getHttp: resolve')),
map(() => 'hello'),
);
}
const anotherMockedStream$ = of(1)
interval$.pipe(
exhaustMap(val => {
return combineLatest([getHttp(val), anotherMockedStream$])
})
).subscribe(console.log);
With it I was able to remove the unnecessary readyForNext$ and it also works for both case #1 and case #2, i.e. if timer's value is lower or higher than interval.