D is for debounceTime

Welcome back! Today it is time for...

...two seconds later...

No NOW is time for...
The debounceTime operator!

What does it do?

It takes your source observable and starts a timer when a value is emitted. (The time is specified in milliseconds)
If no new value occurs before the timer finishes, debounceTime emits the value.
If a new value occurs nothing is emitted and the timer is reset and started again.

What kind of problems does this solve?

It is mostly used for performance improvements, e.g.

1. A line chart with panning and/or zooming functionality. You don't want to fetch new data on every pan/zoom interaction. Instead you want to fetch the data when the users has stopped scrolling or panning for a specified amount of time.
   

   zoomChanged
       .pipe(debounceTime(200))
       .subscribe(newTimeWindow => fetchChartData(newTimeWindow))
   

2. Fetching data for an autocomplete input. You don't want to fetch the autocomplete data matching the current user input on each character the user enters. You want to fetch them when the users stops typing for a specified amount of time.
   

   userInputChanged
       .pipe(debounceTime(200))
       .subscribe(userInput => fetchFilteredAutocompleteValues(userInput))
   

Pretty useful right?

Stay tuned for more RxJS glory!