Post
Ask Question

debounce and debounceTime operator in Angular

Introduction

In Angular, especially when working with RxJS for reactive programming, debounce and debounceTime are operators that help in controlling the rate at which values are emitted by an observable. These operators are particularly useful for dealing with rapid or bursty events, such as user input in a search box.

debounce

The debounce operator delays the emissions from the source observable based on another observable (a notifier). The emission from the source observable is emitted only when the notifier emits a value or completes. This can be used for more complex or dynamic debouncing scenarios where the debounce duration may vary.

Usage

import { fromEvent, interval } from 'rxjs';
import { debounce } from 'rxjs/operators';

// Create a source observable from button click events
const button = document.querySelector('button');
const clicks$ = fromEvent(button, 'click');

// Create a notifier observable that emits a value after 1 second
const notifier$ = interval(1000);

// Apply debounce operator
const debounced$ = clicks$.pipe(
  debounce(() => notifier$)
);

debounced$.subscribe(() => console.log('Button clicked with debounce'));

debounceTime

The debounceTime operator delays the emissions from the source observable by a specified time duration. If a new value is emitted before the time span ends, the previous value is discarded and the timer restarts. This is typically used for straightforward debouncing with a fixed time delay.

Usage

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

// Create a source observable from input events
const input = document.querySelector('input');
const input$ = fromEvent(input, 'input');

// Apply debounceTime operator with a 500ms delay
const debounced$ = input$.pipe(
  debounceTime(500)
);

debounced$.subscribe(event => console.log('Input value with debounceTime:', (event.target as HTMLInputElement).value));

Practical Examples

Using debounce

This example uses a dynamic notifier for debounce:

import { of, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';

const source$ = of('a', 'b', 'c', 'd', 'e');

// A dynamic debounce where each value will be delayed by the time emitted by the timer observable
const example$ = source$.pipe(
  debounce(val => timer(val === 'a' ? 1000 : 2000))
);

example$.subscribe(val => console.log('Debounced value:', val));

Using debounceTime

This example uses a fixed time delay:

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

// Example for search input with debounceTime
const searchInput = document.querySelector('#search');
const searchInput$ = fromEvent(searchInput, 'input');

const debouncedSearch$ = searchInput$.pipe(
  debounceTime(300) // Wait for 300ms pause in events
);

debouncedSearch$.subscribe(event => {
  console.log('Search query:', (event.target as HTMLInputElement).value);
});

In these examples

  • debounce uses an observable (like a timer) to determine when to emit the latest value. This allows for more complex debouncing logic, such as varying debounce durations.
  • debounceTime simply waits for a specified duration (in milliseconds) before emitting the latest value, providing a straightforward way to handle rapid sequences of events like keystrokes or clicks.

Both operators are essential for enhancing performance and user experience, especially in scenarios where frequent events need to be throttled or delayed to prevent unnecessary processing.


Similar Articles