RxJS is a library for doing reactive programming. Creating operators are useful for generating data from various sources to be subscribed to by Observers.
In this article, we’ll look at some filtering operators which let us filter out emitted values in a way that we specify, including the audit, auditTime, debounce, and debounceTime operators.
audit
The audit operator lets us filter out emitted values from the source Observable for a period of time, then emits the most recent values. Then the process is repeated.
It takes one argument, which is the durationSelector function which receives a value from the source Observable to use to compute the duration to which to ignore emitted values.
The durationSelector function can return s promise or an Observable.
It returns the Observable that does the rate-limiting.
It’s similar to throttle, but it returns the last value from the silenced duration instead of the first.
When the duration Observable emits a value or completes, the timer is disabled. Then the most recent source value is emitted from the output Observable.
For example, we can use it as follows:
import { interval } from "rxjs";
import { audit } from "rxjs/operators";
const interval$ = interval(1000);
const result = interval$.pipe(audit(ev => interval(4000)));
result.subscribe(x => console.log(x));
The code above takes the interval$ Observable then pipes the value into the audit operator, which has the function which returns interval(4000). This means the value from the returned Observable will emit values every 4 seconds.
The effect produced would be that every 3 values are skipped.
auditTime
The auditTime operator ignores the source Observable’s values for duration milliseconds then emit the most recent value from the source Observable and repeats the process.
It takes up to 2 arguments. One is the duration , which is the time to wait before emitting the most recent value. The duration is measured in milliseconds or the time unit determined by the optional scheduler argument.
The second is an optional scheduler to let us time the values emitted.
It returns the Observable that does the rate-limiting.
For example, we can use it as follows:
import { interval } from "rxjs";
import { auditTime } from "rxjs/operators";
const interval$ = interval(1000);
const result = interval$.pipe(auditTime(5000));
result.subscribe(x => console.log(x));
The code above takes the emitted values from the interval$ Observable, which emits numbers every second, then pipe s it to the auditTime(5000) operator, which emits the latest value from the interval$ Observable every 5 seconds.
The result will be that we get the latest value emitted from interval$ every 5 seconds.
debounce
debounce emits a value from the source Observable after a particular time span has passed without another source emission.
It takes one argument, which is a durationSelector function that receives a value from the source Observable for computing the timeout duration for each source value.
The durationSelector function can return a promise or an Observable.
It returns an Observable that emits values according to the delay specified by the return value of the durationSelector function. The returned Observable may drop some values if emissions from the source happen too frequently.
For example, we can use it as follows. Given that we have the following input element:
<input type="text" />
We can write the following JavaScript code to delay the emission of the input value for 2 seconds:
import { fromEvent, interval } from "rxjs";
import { debounce } from "rxjs/operators";
const clicks = fromEvent(document.querySelector("input"), "input");
const result = clicks.pipe(debounce(() => interval(2000)));
result.subscribe(x => console.log(x));
The input events are received by the fromEvent function, then it’s pipe d to our durationSelector function which is () => interval(2000) via the debounce operator.
debounceTime
Like the debounce operator, the debounceTime operator emits values from the source Observable after a delay has passed without another emission from the source Observable.
The difference is in the argument it accepts. It takes up to 2 arguments. The first is the dueTime number, which is the duration in milliseconds or the time unit specified by the optional scheduler argument for the time to delay emission of values.
The second argument is the optionalscheduler argument, which defaults to async . It lets us time the emissions as we want to.
It returns an Observable that delays the emission of the source Observable by the specified dueTime and may drop some values if emissions from the source happen too frequently.
For example, we can use it as follows. Given that we have the following input element:
<input type="text" />
We can use the debounceTime operator to delay the emission of input event objects as follows:
import { fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";
const clicks = fromEvent(document.querySelector("input"), "input");
const result = clicks.pipe(debounceTime(2000));
result.subscribe(x => console.log(x));
The code above will delay the emission of input events objects by 2 seconds and drops whatever is emitted less than 2 seconds.
audit and auditTime lets us filter out emitted values from the source Observable for a period of time, then emits the most recent values. Then the process is repeated.
debounce and debounceTime operators emit values from the source Observable after a delay has passed without another emission from the source Observable.
