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.
O problema
Un buscador que consulta en cada pulsación manda diez pedidos para escribir "proveedores", y las respuestas pueden llegar desordenadas. Hay que esperar a que la persona pare.
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));Por que está escrito assim
- debounce devuelve una función nueva que recuerda su propio reloj gracias al cierre (closure).
- Cada llamada cancela el reloj anterior y arma uno nuevo: la función real solo corre cuando pasan 300 ms sin teclas.
- encodeURIComponent evita que un "&" o un "#" escrito por el usuario rompa la dirección.
- El corte en dos caracteres ahorra las consultas más caras y menos útiles.
Pegalo en una página que tenga un <input id="q"> y definí una función pintar(resultados). En la pestaña Red del navegador vas a ver un solo pedido por pausa.
El debounce reduce pedidos pero no ordena respuestas: si dos consultas se cruzan, puede pintarse la vieja al final. Para eso hace falta además un AbortController o comparar el texto actual antes de pintar.
Adapte ao seu caso com IA
O botão copia este prompt com o código colado abaixo. Substitua os colchetes pelo que é seu e cole no ChatGPT, Claude, Gemini ou 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.
Exemplo escrito e revisado à mão.
Comentários
Ainda não há comentários. O primeiro pode ser o seu.
Adaptou para algo seu?
Me conte o que resolveu com isto, ou o que faltou.
