JavaScript Academy · Lección

queueMicrotask y orden de ejecución

Controle con precisión el orden de ejecución.

queueMicrotask y orden de ejecución es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 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.

Conozca queueMicrotask

queueMicrotask permite programar directamente una microtarea sin crear una Promise. El callback se ejecuta después del código síncrono actual, pero antes que cualquier macrotarea.

Es la herramienta más clara para diferir un trabajo hasta el siguiente punto de comprobación de microtareas.

Uso básico

Pase una función a queueMicrotask. Se ejecutará después de que termine el código síncrono.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

La misma prioridad que las Promises

Un callback de queueMicrotask y un .then de Promise comparten la cola de microtareas. Se ejecutan en el orden en que se programaron.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Tiene prioridad sobre setTimeout

Como todas las microtareas, un callback de queueMicrotask se ejecuta antes que cualquier macrotarea de setTimeout, incluso una que se haya programado antes.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Orden dentro del vaciado

Las microtareas se ejecutan en orden FIFO. La primera que se encola es la primera que se ejecuta cuando se vacía la cola.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Anidar microtareas

Una microtarea puede poner otra microtarea en la cola. La nueva se ejecuta durante el mismo vaciado, después de las que ya estaban encoladas y antes que cualquier macrotarea.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Demostración completa del orden

Combine código síncrono, microtareas y una macrotarea. Siga la regla: primero el código síncrono, después las microtareas en orden y, por último, el temporizador.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Intercalación con async/await

Una continuación de await también es una microtarea, por lo que se intercala con queueMicrotask según el orden de programación.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Por qué utilizar queueMicrotask

Utilícelo cuando necesite diferir una pequeña parte del trabajo para que se ejecute después de la pila de llamadas actual, pero antes de que el navegador renderice o de que se active cualquier temporizador. Evita la sobrecarga y la semántica de resolución de crear una Promise desechable.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Evite los bucles infinitos de microtareas

Como las microtareas se vacían por completo antes que las macrotareas, un callback que siempre vuelve a ponerse en la cola bloqueará para siempre los temporizadores y el renderizado. Establezca siempre una condición de finalización.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

El modelo mental completo

En cada iteración del bucle de eventos: ejecute una macrotarea (o el script inicial), después vacíe todas las microtareas, renderice y repita. queueMicrotask le permite conectarse con precisión a esa fase de vaciado.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Comprobación rápida

¿Cuándo se ejecuta un callback de queueMicrotask con respecto a setTimeout(fn, 0)?

Resumen: queueMicrotask y el orden de ejecución

Ha aprendido a programar tareas con precisión:

queueMicrotask programa una microtarea sin utilizar una Promise.
Comparte la cola de microtareas con los callbacks de Promise, en orden FIFO.
Todas las microtareas se vacían antes que cualquier macrotarea y antes del renderizado.
El modelo del bucle es: macrotarea, vaciar las microtareas, renderizar y repetir.

Preguntas frecuentes

¿La lección «queueMicrotask y orden de ejecución» es gratis?

Sí — el texto completo de «queueMicrotask y orden de ejecución» 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 «queueMicrotask y orden de ejecución»?

Controle con precisión el orden de ejecución. 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 4 de 4.

¿Cuánto tiempo toma la lección «queueMicrotask y orden de ejecución»?

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

← Volver a JavaScript Academy