RxJs Operators Debounce Vs Throttle Vs Audit Vs Sample

In this article, we'll review how RxJS operators work and how they differ.

RxJs - Reactive Extensions Library for JavaScript

RxJS (Reactive Extensions for JavaScript) is a library for composing asynchronous and event-based programs using observable sequences. It is a popular library used in front-end web development, especially with frameworks like Angular, React, and Vue.

Overall, RxJS is a powerful tool for managing complex asynchronous scenarios and building reactive and scalable web applications.

RxJs Operators - Debounce vs. Throttle vs. Audit vs. Sample

We will see different operators of RxJs to reduce the load on the consumption function side or API calls on the server side.

Let's say we don't want to react to every user mousemove or every input.change events like form submit, validate, auto-search textbox, or dropdown filter on the type. In their way, they will let you filter input streams based on time intervals.

Let's check with the real-time example of an auto-complete textbox. If we have to search in the database based on type-in and in the backend, we need to make API calls, or from the list, we need to filter data. In that case, on character type will make a filter or API call to get the data. We can use Rxjs operators to reduce the load and API calls to get data by using RxJs operators like debounce, throttle, audit, and sample.

Now the question is if we can do it by all operators, what's the difference between them? Let's understand by example:

this.userQuestionUpdate.pipe(auditTime(500)).subscribe(value => {
    this.consoleMessagesAuditTime.push(new ResponseData(value, new Date()));
});
this.userQuestionUpdate.pipe(debounceTime(500)).subscribe(value => {
    this.consoleMessagesDebounceTime.push(new ResponseData(value, new Date()));
});
this.userQuestionUpdate.pipe(throttleTime(500, undefined, {
    leading: true
})).subscribe(value => {
    this.consoleMessagesThrottleTime.push(new ResponseData(value, new Date()));
});
this.userQuestionUpdate.pipe(throttleTime(500, undefined, {
    trailing: true
})).subscribe(value => {
    this.consoleMessagesThrottleTime_trailing.push(new ResponseData(value, new Date()));
});
this.userQuestionUpdate.pipe(sampleTime(500)).subscribe(value => {
    this.consoleMessagesSampleTime.push(new ResponseData(value, new Date()));
})
}

In the above code, we have added a 500ms time gap for all operators. Now let's review the differences.

debounceTime

It will respond only if the given time limit crosses and the source does not produce more values. In other words, It will wait until the source producing values and the given time limit is not over.

throttleTime

There are two types of throttle leading and trailing.

• Leading will start the timer after the first emit and keep watching until the last emit in a given time span. Once the time span is completed and the source is producing values, it will repeat.

• Trailing will start a timer after the first emit and keep watching until the last. The only difference in leading is after completing producing words and the time span, it will check for the response and return value.

auditTime

It's the same as throttle trailing. The only difference is it will not return value after the last time span if the source is completed. In other words, it's a mixer of throttle leading and trailing.

sampleTime

emit the value in a given time-span interval if the source is emitted.

Again it's for understanding differences. We can use it as per the requirement and improve the application's performance.

You can play with marble on the link below for more experiments and understanding.

https://thinkrx.io/rxjs/debounceTime-vs-throttleTime-vs-auditTime-vs-sampleTime/

Thank you

Vishal Joshi