Búsqueda en vivo que no dispara una consulta por cada tecla

Un debounce de seis líneas: espera a que la persona deje de escribir antes de consultar al servidor.

The problem

function debounce(fn, espera = 300) {
  let reloj;
  return (...args) => {
    clearTimeout(reloj);
    reloj = setTimeout(() => fn(...args), espera);
  };
}

const buscar = debounce(async (texto) => {
  if (texto.length < 2) return;
  const r = await fetch("/buscar?q=" + encodeURIComponent(texto));
  pintar(await r.json());
}, 300);

document.querySelector("#q").addEventListener("input", (e) => buscar(e.target.value));

Why it is written this way

1. debounce devuelve una función nueva que recuerda su propio reloj gracias al cierre (closure).
2. Cada llamada cancela el reloj anterior y arma uno nuevo: la función real solo corre cuando pasan 300 ms sin teclas.
3. encodeURIComponent evita que un "&" o un "#" escrito por el usuario rompa la dirección.
4. El corte en dos caracteres ahorra las consultas más caras y menos útiles.

Adapt it to your case with AI

The button copies this prompt with the code pasted below it. Replace the brackets with your own details and paste it into ChatGPT, Claude, Gemini or Copilot.

Tengo este debounce en JavaScript para un buscador. Agregale cancelación del pedido anterior con AbortController para que nunca se pinte una respuesta vieja, y un estado de "buscando…" en el elemento [SELECTOR DEL INDICADOR]. Mi endpoint es [URL DEL ENDPOINT] y devuelve [FORMA DE LA RESPUESTA]. Sin librerías, y explicame en dos líneas qué cambia.

Example written and reviewed by hand.