Remap RXJS observable to a timer start, without stream interruption - rxjs

Question

What is the correct way in RXJS to remap an observable into a timer start value, without interrupting the original stream?
obs.pipe(take(1000), startTimer())
.subscribe(start => {
// show how long it took to finish streaming 1000 values:
const duration = Date.now() - start;
console.log(duration);
});
I want startTimer to remap into once-off subscription with start, but without interrupting the original stream, i.e. in this case subscribe is to be triggered only after all 1000 values have finished streaming.
How do I implement such startTimer? It's supposed to result into a once-off Date.now() value to help measure full stream duration.
Or is there maybe a standard solution for this already that I'm missing?
update-1
The expected result is like the one below, but without the need for creating start as an external variable, and instead make it part of the stream:
const start = Date.now();
obs.pipe(take(1000))
.subscribe({
complete() {
const duration = Date.now() - start;
console.log(duration);
}
});
The reason I want to make it part of a stream is because the original observable and subscribers are very much detached from each other, as in sitting in unrelated source files.
P.S. Alternatively, a solution that emits duration in the end would also be good, if that is at all possible.
update-2
In the end, I used a generic drain operand, designed to drain an observable stream, and then produce an observable at the end:
/**
* Drains the source observable till it completes, and then posts a new value-observable.
*/
function drain<T>(value: T | Observable<T> | (() => T | Observable<T>)) {
const v = () => {
const a = typeof value === 'function' ? value.call(null) : value;
return a instanceof Observable ? a : of(a);
}
return s => defer(() => s.pipe(filter(_ => false), c => concat(c, v()))) as Observable<T>;
}
Using this operand, I can rewrite startTimer like this:
const startTimer = () => drain(Date.now);

Answer 1

Some code that does what you describe pretty much exactly the way you describe it:
function logRunTime<T>(prefix: string): MonoTypeOperatorFunction<T> {
return s => defer(() => {
const start = Date.now();
return s.pipe(
tap({
complete: () => console.log(`${prefix}: ${Date.now() - start}ms`)
})
);
});
}
interval(1000).pipe(
take(10),
logRunTime("Ten Seconds of Interval")
).subscribe(console.log);
Output:
0
1
2
3
4
5
6
7
8
9
Ten Seconds of Interval: 10014ms
Update 1
do not make the original observable stop emitting values [...] we just do not want the source values
It seem to me that either you keep emitting the values or you don't.
Here is a version that drops the source emissions.
Is this what you're after?
function reduceRunTime<T>(prefix: string): OperatorFunction<T, string> {
return s => defer(() => {
const start = Date.now();
return s.pipe(
filter(_ => false),
c => concat(c, of(null)),
map(_ => `${prefix}: ${Date.now() - start}ms`)
);
}) as Observable<string>;
}
interval(1000).pipe(
take(10),
reduceRunTime("Ten Seconds of Interval")
).subscribe(console.log);
Output:
Ten Seconds of Interval: 10013ms
Update 2
If you don't want a string, this will emit the start time once the observable completes.
function startTimer() {
return s => s.pipe(
filter(_ => false),
c => concat(c, of(Date.now()))
) as Observable<number>;
}
Update 3
Two separate behaviours
I think update 2 may have been cleaned up too much. Consider this example:
const timed$ = interval(500).pipe(
take(5),
startTimer()
);
const logDiff = (start: number) => console.log(Date.now() - start);
timed$.subscribe(logDiff);
setTimeout(() => {
timed$.subscribe(logDiff);
}, 1000);
setTimeout(() => {
timed$.subscribe(logDiff);
}, 5000);
The output:
2521
3507
7511
Notably, because Observables are lazy (do nothing until subscribed), but Date.now is called when the observable is created. Your startTime may well be set long before the observable even starts. Making a 2.5s observable appear to require 7.5s.
Using defer fixes this problem as it doesn't create the observable until it is subscribed.
Updated startTimer
function startTimer() {
return s => defer(() => s.pipe(
filter(_ => false),
c => concat(c, of(Date.now()))
)) as Observable<number>;
}
New output for example above:
2521
2507
2511
Now you can do fun things like run the same observable 10 times and average out the runtime to get a better idea of how long it will take.
const average = arr => arr.reduce( ( p, c ) => p + c, 0 ) / arr.length;
concat(...Array.from(Array(10)).map(_ => timed$)).pipe(
map(start => Date.now() - start),
tap(console.log),
toArray()
).subscribe(runs => console.log("Average Runtime: ", average(runs)));
Output:
2515
2506
2506
2506
2507
2505
2506
2506
2507
2507
Average Runtime: 2507.1