0Pricing
JavaScript Academy · Lección

Macrotareas y cola de tareas

Comprenda cómo se programan los temporizadores y las operaciones de E/S.

Macrotareas y cola de tareas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es una macrotarea?

Una macrotarea (también llamada tarea) es una unidad de trabajo programada para ejecutarse más tarde, después de que termine el código síncrono actual. Los callbacks de setTimeout son el ejemplo clásico.

Las macrotareas esperan en la cola de tareas hasta que la pila de llamadas está vacía.

setTimeout aplaza el trabajo

setTimeout registra un callback para ejecutarlo más tarde. Incluso con un retraso de 0, se ejecuta después de todo el código síncrono actual.

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

La cola de tareas

Cuando se activa un temporizador, su callback se coloca en la cola de tareas. El bucle de eventos toma una tarea de esta cola solo cuando la pila de llamadas está vacía, la ejecuta hasta completarla y vuelve a comprobar la cola.

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

Las tareas se ejecutan en el orden en que se encolan

Las tareas con el mismo retraso se ejecutan en el orden en que se programaron. La cola de tareas es FIFO: la primera en entrar es la primera en salir.

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

El retraso es mínimo, no exacto

El retraso que indique es el tiempo mínimo que debe transcurrir antes de que el callback pueda ejecutarse. La ejecución real solo ocurre cuando la pila se vacía y terminan las tareas anteriores, por lo que puede producirse más tarde.

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

Ordenación por retraso

Los distintos retrasos cambian el orden: los retrasos más cortos habilitan antes las tareas correspondientes, por lo que normalmente se ejecutan antes que las de mayor retraso, sin importar el orden de programación.

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

Una tarea por cada iteración del bucle

El bucle de eventos ejecuta exactamente una macrotarea por iteración y después realiza otro trabajo antes de la siguiente. Esto mantiene el sistema receptivo entre tareas.

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

Los temporizadores anidados se encolan después

Un temporizador programado dentro de una tarea se incorpora a la cola por detrás de las tareas que ya están esperando, por lo que se ejecuta en una iteración posterior del bucle.

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

setInterval también usa macrotareas

setInterval programa una macrotarea repetitiva. Aquí ejecutamos algunas iteraciones y detenemos el intervalo con clearInterval para mantener acotada la salida.

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

Lo síncrono siempre gana

Por pequeño que sea el retraso, todas las macrotareas esperan detrás de todo el código síncrono de la ejecución actual. La pila debe vaciarse primero.

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

Por qué importan las macrotareas

Las macrotareas permiten aplazar trabajo sin bloquear. Dividir un trabajo pesado en fragmentos temporizados mantiene una aplicación receptiva. Sin embargo, las macrotareas no tienen la prioridad más alta: las microtareas (Promises) se ejecutan antes de la siguiente macrotarea, como verá a continuación.

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

Comprobación rápida

¿Cuándo se ejecuta un callback de setTimeout(cb, 0)?

Repaso: macrotareas

Ha aprendido cómo se programa el trabajo aplazado:

  • Las macrotareas (setTimeout, setInterval) esperan en la cola de tareas.
  • La cola es FIFO; el bucle de eventos ejecuta una tarea por iteración.
  • El retraso es un tiempo mínimo y el código síncrono siempre se ejecuta primero.
  • Las microtareas tienen mayor prioridad, algo que explorará a continuación.

Preguntas frecuentes

¿La lección «Macrotareas y cola de tareas» es gratis?

Sí — el texto completo de «Macrotareas y cola de tareas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Macrotareas y cola de tareas»?

Comprenda cómo se programan los temporizadores y las operaciones de E/S. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Macrotareas y cola de tareas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. La pila de llamadas
  2. Macrotareas y cola de tareas
  3. Microtareas y Promises
  4. queueMicrotask y orden de ejecución
← Volver a JavaScript Academy