signature: debounceTime(dueTime: number, scheduler: Scheduler): Observable

Discard emitted values that take less than the specified time between output

💡 This operator is popular in scenarios such as type-ahead where the rate of user input must be controlled!

​​​​

Examples

Example 1: Debouncing based on time between input

( StackBlitz )

// RxJS v6+
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
​
// elem ref
const searchBox = document.getElementById('search');
​
// streams
const keyup$ = fromEvent(searchBox, 'keyup');
​
// wait .5s between keyups to emit current value
keyup$
  .pipe(
    map((i: any) => i.currentTarget.value),
    debounceTime(500)
  )
  .subscribe(console.log);

Related Recipes

• ​Save Indicator​

• ​Type Ahead​

Additional Resources

• ​debounceTime 📰 - Official docs

• ​debounceTime - In Depth Dev Reference

• ​Transformation operator: debounce and debounceTime​

  🎥 💵 - André Staltz

• ​Time based operators comparison​

• ​Build your own debounceTime operator​

  🎥 - Kwinten Pisman

📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts​