20. debounceTime: wait for quiet

debounceTime — wait for quiet

This is one of the most useful operators in RxJS. debounceTime(ms) works like this: when a value arrives, it doesn't pass it on right away — it waits the given period. If a new value comes in during that window, the old one is dropped and the wait restarts. Only the value followed by a pause gets through.

'r' → 'rx' → 'rxjs' [pause] → debounceTime(30) → only 'rxjs' gets through

Where it's used

• Search: don't hit the server on every keystroke.
• Autosave: wait for a pause in typing, then save.
• Form validation: show errors after the user stops typing.
• Resize/scroll: don't recompute on every pixel.

Glossary

• Debounce (as in key "bounce") — a technique for damping frequent signals: only the last one after a pause gets through.
• hot Observable — a stream that "runs" on its own, like a stream of real events (clicks, for instance). The marble function hot(...) lets you simulate such a stream in tests.

const { debounceTime } = Rx;

function createSearch$(input$) {
  return input$.pipe(
    debounceTime(30)
  );
}