Como aplicar debounce em pesquisa no Angular

Reduza chamadas desnecessárias à API enquanto o usuário digita usando RxJS.

Por que usar debounce?

Sem debounce, cada tecla pode disparar uma requisição. Com debounceTime, você espera o usuário parar de digitar por alguns milissegundos.

Exemplo

this.pesquisa$
  .pipe(
    debounceTime(400),
    distinctUntilChanged()
  )
  .subscribe(valor => {
    this.buscar(valor);
  });

Quando há API

Para chamadas HTTP, switchMap pode cancelar a requisição anterior quando um novo termo chega.