JavaScript de Cero a Experto / Asincronía I
Síncrono vs asíncrono: esperar sin congelar
JavaScript tiene un solo hilo: hace UNA cosa a la vez. Y sin embargo tu página descarga datos, espera timers y responde clics… todo "al tiempo". Ese truco se llama asincronía, es EL tema que separa niveles en cualquier entrevista, y empieza hoy con una demostración que vas a sentir: congelar una página con tus propias manos.
Un solo cocinero
Siéntelo: congela la página
Este contador avanza cada medio segundo. Presiona "Bloquear 3 segundos" y mira lo que pasa con el contador, el botón, TODO:
Tres segundos de hielo: el contador no avanza, los clics no responden, la
página entera contuvo la respiración. No hubo error — hubo un while
síncrono acaparando al único cocinero. Regla grabada a fuego: en el
navegador, nada puede bloquear por mucho tiempo, porque bloquear el hilo
es congelar la experiencia completa del usuario.
La alarma del horno: setTimeout
setTimeout(funcion, ms) es la alternativa civilizada: "ejecuta esta
función DESPUÉS de estos milisegundos"… y sigue con lo demás de inmediato.
Ya lo viste de pasada en el módulo 8; míralo ahora con lupa:
Mira el orden en la consola: 1, 2… y DESPUÉS el 3. setTimeout no pausa
el programa — programa la alarma y suelta el turno. Su hermano
setInterval repite cada X milisegundos y devuelve un id para apagarlo
con clearInterval (olvidarlo es una fuga clásica: alarmas fantasma
sonando para siempre — primas de los listeners fantasma del módulo 8).
Un detalle que sorprende a todos: los milisegundos son un "no antes de", no una promesa exacta. Si el cocinero está ocupado cuando suena la alarma, la atiende cuando se desocupe. ¿Quién decide ese orden exactamente? Esa es la próxima lección — el mecanismo más preguntado en entrevistas de JavaScript.
Ejecutas: console.log('A'); setTimeout(() => console.log('B'), 0); console.log('C'); — con CERO milisegundos de espera. ¿Qué orden imprime?
Mini-reto
En el playground del contador: 1) baja el bloqueo a 500ms y decide desde
cuándo se SIENTE el congelamiento (¿100ms? ¿1000ms?); 2) agrega un botón
"Avisar en 2s" que use setTimeout para imprimir un mensaje — y comprueba
que, a diferencia del while, el contador NUNCA se detiene; 3) remata en
"Mi Bolsillo": un setInterval que cada segundo imprima "recordatorio:
registra tus gastos" y se apague solo a la tercera vez.
Qué sigue
Ya sabes que las funciones "para después" esperan su turno. Pero ¿dónde esperan? ¿quién las deja pasar? ¿por qué unas tienen prioridad sobre otras? La próxima lección abre la cocina completa: call stack, colas y el famoso EVENT LOOP — visualizado como un restaurante, para que no se te olvide jamás.