Search code examples
rxjsobservablerxjs-pipeable-operators

What is the difference between throttleTime vs debounceTime in RxJS and when to choose which?

I'm trying to understand throttleTime vs debounceTime and which one is to be used when?

I have an upvote button that makes an API request to the backend (which counts the votes). User can submit button multiple times, but I'd like to limit the times per second button can be pressed.

I know throttleTime and debounceTime operators can do that, but which one should I choose?

const upvoteClicks = fromEvent(this.el.nativeElement, 'click')
   .pipe(debounceTime(500))
   .subscribe(() => this.myService.postUpvote(this.postId));
Solution

  • I think in your case throttleTime works a little bit better, because you want to make the api request as soon as user clicks the button.

    Both throttleTime and debounceTime ignore the events which come in the meantime, but throttleTime emits right away, while debounceTime waits for additional delay.

    You can visually see that very well at https://rxmarbles.com enter image description here

    enter image description here

    What is more, throttleTime vs debounceTime in RxJS article provides a good overview of both operators.