Marc Semper Lloret
← El DOM: la web que responde

Sesión 13 · Semana 5

Por qué existe la asincronía

Hoy · Hoja de ruta

  1. 1. Aprende: Por qué JavaScript no espera, y qué es el bucle de eventos.
  2. 2. Haz: Predice el orden de ejecución de varios fragmentos.
  3. 3. Comprueba: Explicas por qué un valor «llega vacío» cuando llega tarde.

Antes de empezar · 5 minutos, sin apuntes

  1. Si pedir datos a un servidor tarda dos segundos, ¿qué debería hacer la página mientras tanto?
  2. ¿Puede la página quedarse congelada? ¿Por qué sería grave?
  3. ¿En qué orden crees que se ejecutan tres líneas si la de en medio tarda?

Un solo hilo

JavaScript ejecuta una cosa cada vez. Si una operación bloquea, se bloquea todo: no responden los clics, no se desplaza la página, no se reproduce una animación.

Por eso las operaciones lentas —una petición de red, un temporizador, leer un fichero— no se esperan. Se encargan, y el resultado llega después.

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");

// 1, 3, 2

Aunque el retraso sea cero. La función encargada se pone en cola y se ejecuta cuando el trabajo actual termina.

Cómo se reparte el trabajo
  1. Se ejecuta el código actual hasta el final
  2. Las tareas lentas se encargan fuera
  3. Cuando terminan, su función entra en la cola
  4. El bucle de eventos la ejecuta cuando hay hueco

El fallo que produce

let productos = [];

setTimeout(() => {
  productos = [{ nombre: "Teclado" }];
}, 1000);

console.log(productos.length);    // 0, no 1

No es que el array esté mal: es que se mira antes de tiempo. Cuando en la sesión 15 pidas datos al servidor y te salga una lista vacía, esta será la primera sospecha.

Un valor que llega tarde no se puede leer pronto

La consecuencia práctica es una regla de diseño: todo lo que dependa del dato tiene que ocurrir dentro de lo que se ejecuta cuando el dato llega, no en la línea de después.

La sintaxis para escribir eso sin acabar con seis niveles de anidamiento es la de mañana.

Temporizadores

const id = setTimeout(() => console.log("Una vez"), 1000);
clearTimeout(id);

const otro = setInterval(() => console.log("Cada segundo"), 1000);
clearInterval(otro);

Guarda siempre el identificador: un intervalo que nadie detiene sigue corriendo mientras la página esté abierta.

Tarea 13 · Predecir el orden

  1. Escribe cinco fragmentos que mezclen código normal y temporizadores; predice el orden y compruébalo.
  2. Reproduce el fallo del array vacío y explícalo por escrito.
  3. Simula una carga de dos segundos que muestre un mensaje de «cargando» y luego los datos.
  4. Monta un contador con setInterval y detenlo con un botón.
  5. Provoca un intervalo no detenido y observa el efecto en consola.
Objetivo mínimoPredices el orden de ejecución y explicas el fallo del valor leído pronto.
Si lo tienesSimula una carga que a veces falla y muestra un mensaje distinto.
RetoExplica qué pasa si pones un bucle de diez millones de vueltas en un manejador de clic.

Checkpoint · fin de la sesión 13

  • Explicas por qué JavaScript no espera a lo lento.
  • Predices el orden con temporizadores de por medio.
  • Reconoces el fallo del valor leído antes de tiempo.
  • Detienes los temporizadores que creas.
Ver respuestas

1 · Porque tiene un solo hilo: esperar bloquearía toda la interfaz.

2 · Al final, después del código actual, aunque el retraso sea cero.

3 · Que el dato aún no había llegado cuando se leyó.