Difference between audit and debounce in RxJS?

Question

I am reading the official documentation of RxJS and then I realized they both are doing exactly the same thing.

To me they both seem exactly similar.

Please point out the difference between them if there is any at all.

Answer 1

I'm going to describe the difference between them in terms of their Time versions as that's how I understand them best.

Both auditTime and debounceTime will initially start a timer when an event comes in. Both will wait the given amount of time before they emit an event. The difference is that debounceTime resets the timer whenever a new event comes in while auditTime does not. auditTime will emit the most recent event after the given number of milliseconds whether or not it is still receiving events. debounceTime will wait for a gap in the events. You said you read the documentation but just to double check I have found this document particularly helpful.

Answer 2

Heres a marble diagram to compare the *Time counterparts:

Each value here represents time of its emission.

Play with this marble diagram here: debounceTime vs throttleTime vs auditTime vs sampleTime

And here is a more in-depth review: RxJS debounce vs throttle vs audit vs sample | dev.to

Already having an awesome answer by @qfwfq, I wanted to add a more visual explanation.

Hope this helps someone