Reto de entrevista: debounce (el jefe final)

El último reto del supercurso, y el más pedido en entrevistas de front-end. debounce espera a que dejes de disparar un evento y ENTONCES actúa, una sola vez. Es lo que hace que una barra de búsqueda no bombardee al servidor con cada tecla —lo usaste en el proyecto del buscador, y hoy lo construyes desde cero. Cerramos JavaScript con broche de oro.

Reto

debounce: espera a que pare

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

Qué debes construir

Una función debounce(fn, ms) que devuelva una versión "pospuesta" de fn: cada vez que la llamas, reinicia un temporizador de ms; fn solo se ejecuta cuando pasan ms SIN nuevas llamadas. Si llamas rápido diez veces, se ejecuta una sola vez, ms después de la última.

Reglas

• Llamadas rápidas y seguidas → una sola ejecución, tras la pausa.
• Cada llamada nueva REINICIA la cuenta (cancela la anterior).
• La función debe recibir bien los argumentos de la última llamada.
• Pasa las comprobaciones del playground.

20:00

Cuando estés listo, arranca el reloj.

Iniciar

Pista 1

Pista 2(revela primero la pista 1)

El secreto de debounce cabe en una idea: cada llamada cancela la anterior. Mientras el usuario teclee, siempre hay un clearTimeout que borra la ejecución pendiente antes de que ocurra; solo cuando para lo suficiente, el último setTimeout sobrevive y dispara. Es el patrón que blinda toda barra de búsqueda del mundo.

Corre el playground: cuatro "teclas" rápidas producen CERO peticiones al instante y UNA sola tras la pausa —con el último valor, "hola". Eso es exactamente lo que viste en el buscador del proyecto 2, ahora entendido hasta el hueso. Como con throttle, la parte temporal se DEMUESTRA con console.log; en Vitest la volverías determinista con vi.useFakeTimers() (módulo 16).

Y una reflexión de cierre: debounce, throttle y memoize son tres decoradores construidos con lo mismo —una closure que envuelve una función y controla cuándo se ejecuta. Empezaste el curso sin saber qué era una variable; lo terminas construyendo las herramientas que las librerías profesionales cobran por tener. Ese es el camino completo.

Revelar solución

Fin del supercurso de JavaScript

Lo lograste. Diecisiete módulos: del primer console.log a los patrones que sostienen las apps reales. Repasa lo que ahora SABES HACER —no en teoría, con las manos:

• El lenguaje a fondo: tipos, funciones, closures, this, prototipos, clases.
• Los datos: arrays, objetos, Map/Set, inmutabilidad, programación funcional.
• El navegador: DOM, eventos, fetch, localStorage, observers, Web Workers.
• La asincronía sin miedo: event loop, promesas, async/await.
• La arquitectura: módulos, patrones, observables, máquinas de estado.
• El oficio: errores, debugging, testing, y proyectos completos de portafolio.

Ya no eres alguien que "está aprendiendo JavaScript". Eres alguien que construye con JavaScript. Lo que sigue en tu camino es ponerle red de tipos a todo esto —TypeScript, el siguiente supercurso— y luego los frameworks (React, Next.js, Angular) que no son más que JavaScript bien organizado, el que ya dominas. La base está puesta. Ahora se construye alto.