A pipe functions for rxjs 6+ which accepts a 'wait' observable, emits 1 elements of the source stream and waits for an event on the 'wait' observable.
What does throttleAsync do (in order)?
- Get a waitUntil$ observable as parameter
- Emit one value (may be configurable in the future)
- Wait until waitUntil$ observable emits a value.
- If waitUntil$ emits a value, emit another value from the source observable.
Why is this useful?
I personally need it for splitting up resize events from the browser into a
resize-start and a
First, we need an observable of window resize events:
const windowResize$ = fromEvent(window, 'resize');
We can produce a
resize-end observable by
const windowResizeEnd$ = windowResize$.pipe(debounceTime(500));
But how would you build the windowResizeStart$ observable?
This is, where the
throttleAsync pipe comes in.
windowResize$ to emit exactly one event and then pause emission
windowResizeEnd$ emits a value.
const windowResizeStart$ = windowResize$.pipe( throttleAsync(windowResizeEnd$) );
Future Features (eventually)
n source eventsbetween
waitUntil$observable emissions instead of only one.
The parameter n should be configureable when instantiating throttleAsync.
- Make the parameter n dynamic by using the value of the
waitUntil$observable as a number of how many events to emit next.
[1.1.0] - 2020-04-13
- Updated Dependencies to fix dependency security issues
- Improved npm packaging for easier usage
[1.0.0] - 2018-11-12
- throttleAsync pipe which emits one event and then waits for