JavaScript de Cero a Experto / Proyectos + retos

Reto de entrevista: throttle (controlar el caudal)

Reto25 min100 XP

Un evento que se dispara cientos de veces por segundo —el scroll, el resize— puede ahogar tu app si reaccionas a cada uno. throttle es la válvula que limita el caudal: deja pasar la función como máximo una vez cada X milisegundos. Con el patrón decorador del reto anterior y un temporizador, construyes una herramienta que usan todas las apps serias.

Reto

throttle: una vez cada X

Difícil20 min100 XP(×2 sin mirar la solución)

Qué debes construir

Una función throttle(fn, ms) que devuelva una versión "estrangulada" de fn: por más veces que la llames, se ejecuta como máximo una vez cada ms milisegundos. La primera llamada pasa de inmediato; las siguientes se ignoran hasta que pase el tiempo.

Reglas

La primera llamada se ejecuta YA (comportamiento leading edge).
Durante la ventana de ms, las llamadas extra se ignoran.
Pasado ms, la siguiente llamada vuelve a pasar.
Pasa las comprobaciones del playground.

20:00

Cuando estés listo, arranca el reloj.

throttle garantiza un ritmo MÁXIMO: pase lo que pase, la función corre a lo sumo una vez por ventana. Es lo que quieres para acciones que deben pasar REGULARMENTE mientras algo ocurre —actualizar una barra de progreso al scroll, recalcular un layout al resize— sin ahogar el hilo (módulo 9).

Nota honesta sobre testear tiempo: el comportamiento leading (la primera llamada) es síncrono y sí lo probamos con el mini-runner; pero la parte temporal (que la puerta se reabra tras ms) es asíncrona, y aquí la DEMOSTRAMOS con console.log. En un proyecto real con Vitest usarías vi.useFakeTimers() y vi.advanceTimersByTime(150) para controlar el reloj y convertirlo en un test determinista (módulo 16) —la forma profesional de testear temporizadores sin esperar de verdad.

Qué sigue

El jefe final. throttle deja pasar a ritmo constante; su hermano debounce hace lo opuesto: ESPERA a que dejes de disparar y entonces actúa UNA vez. Es el que usaste en el buscador, el que blinda toda barra de búsqueda del mundo —y el cierre perfecto para el supercurso de JavaScript.