Debounce Implementation Angular

Debouncing is a technique used to control the rate at which a function is executed. It’s particularly useful when dealing with events like user input (e.g., typing in a search box) or other events that may trigger frequent function calls. Debouncing helps optimize performance by ensuring that a function is only executed after a certain time has passed since the last event.

In Angular, you can use the debounceTime operator provided by RxJS to implement debouncing. RxJS is a powerful library for working with asynchronous data streams, and it's commonly used in Angular applications.

Here’s how to use debounceTime in Angular:

1. Import RxJS: Make sure you have RxJS installed. If not, you can install it using npm or yarn:

npm install rxjs

In your Angular component, import the necessary RxJS operators and classes:

import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

2. Create a Subject: Create a Subject to represent the input event or source of events you want to debounce:

searchInput = new Subject<string>();

3. Subscribe with DebounceTime: Subscribe to the Subject and apply the debounceTime operator to delay the execution of your function:

ngOnInit() {
  this.searchInput.pipe(
    debounceTime(300) // Adjust the debounce time (in milliseconds) as needed
  ).subscribe((searchTerm: string) => {
    // Call your function here, e.g., performSearch(searchTerm)
  });
}

In this example, the debounceTime(300) operator delays the execution of the function by 300 milliseconds after the last event.

Get Amit Dhiman’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. Push Values into the Subject: Whenever the input event occurs (e.g., user typing in a search box), push the event data (search term) into the Subject:

onSearchInputChange(searchTerm: string) {
  this.searchInput.next(searchTerm);
}

You can call this function whenever there’s a change in the search input.

5. Complete the Subscription: It’s important to complete the subscription when the component is destroyed to prevent memory leaks. You can do this in the ngOnDestroy lifecycle hook:

ngOnDestroy() {
  this.searchInput.complete();
}

Now, your function will only be executed after the specified debounce time (300 milliseconds in this example) has passed since the last input event. This helps optimize performance by reducing the number of function calls, especially in scenarios where frequent events occur.

Here’s a complete example:

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `
    <input
      type="text"
      placeholder="Search..."
      (input)="onSearchInputChange($event.target.value)"
    />
  `,
})
export class SearchComponent implements OnDestroy {
  searchInput = new Subject<string>();

  constructor() {
    this.searchInput
      .pipe(debounceTime(300))
      .subscribe((searchTerm: string) => {
        // Call your search function here
        this.performSearch(searchTerm);
      });
  }

  onSearchInputChange(searchTerm: string) {
    this.searchInput.next(searchTerm);
  }

  performSearch(searchTerm: string) {
    // Perform the actual search operation here
    console.log(`Searching for: ${searchTerm}`);
  }

  ngOnDestroy() {
    this.searchInput.complete();
  }
}

In this example, when the user types in the search input field, the performSearch function will be executed with the debounced search term after a 300-millisecond delay between input events. Adjust the debounceTime value according to your specific needs.