Cuando ejecuta el fragmento de código a continuación, genera 2,1 . Dado que Promise es una microtarea y todo lo que hay dentro de una promesa debe ejecutarse antes que una macrotarea (setTimeout), espero que el resultado sea 1,2 . Entonces, incluso si hay una macrotarea dentro de una microtarea, pensé que la salida sería 1,2 .
Pero da salida a 2,1 .
¿Cuál es el truco aquí? ¿Por qué genera 2,1 en lugar de 1,2 ?
Promise.resolve().then(() => { setTimeout(() =>{ console.log("1") }, 0) }) setTimeout(() => { console.log("2") }, 0)La promesa es una micro tarea y se ejecutará antes de timeout1 , pero timeout1 ya está programado como una macro tarea.
Cuando se resuelva la promesa, se programará timeout2 , pero la macrotarea Q ya tiene timeout1 y, como tal, ya está programada y se ejecutará primero.
Promise.resolve().then(/* 1. */() => { setTimeout(/* 4. */() => { console.log("1") /* 8. */ }, 0) /* 5. */ }) setTimeout(/* 2. */() => { console.log("2") /* 6. */ /* 7. */ }, 0) /* 3. */La siguiente tarea se agrega a la cola de microtareas. Llamémoslo "micro1":
() => { setTimeout(() => { console.log("1") }, 0) }Las colas de tareas parecen
La siguiente macrotarea está programada. Llamémoslo "macro1"
() => { console.log("2") }Las colas de tareas se ven así:
El código termina de ejecutarse. El bucle de eventos elige la siguiente tarea. La cola de microtareas tiene una prioridad, la próxima tarea a ejecutar es micro1.
La siguiente macrotarea está programada. Llamémoslo "macro2"
() => { console.log("1") }El tiempo de espera es cero, por lo tanto, no hay nada que esperar. La cola es primero en entrar, primero en salir, por lo tanto, la tarea macro2 se agrega al final . No hay mayor prioridad solo porque vino de una microtarea o algo por el estilo.
Las colas de tareas se ven así:
La tarea termina de ejecutarse. El bucle de eventos elige la siguiente tarea. La cola de microtareas está vacía, por lo tanto, elige una tarea de la cola de macrotareas. La siguiente tarea a ejecutar es macro1.
La tarea imprime "2" en la consola.
La tarea termina de ejecutarse. El bucle de eventos elige la siguiente tarea. La cola de microtareas está vacía, por lo tanto, elige una tarea de la cola de macrotareas. La siguiente tarea a ejecutar es macro2.
La tarea imprime "1" en la consola.
Este es el Eventloop (la mejor explicación que he visto): https://youtu.be/cCOL7MC4Pl0?t=487
console.log("1") Promise.resolve().then(() => { console.log("4") setTimeout(() =>{ console.log("7") }, 0) console.log("5") }) console.log("2") setTimeout(() => { console.log("6") }, 0) console.log("3")El recorte podría ayudarte a entenderlo.
Promis.resolve().then() hace lo mismo que setTimout(0), por lo que básicamente escribe un tiempo de espera dentro de un tiempo de espera y, por lo tanto, el bucle de eventos tiene que repetirlo dos veces.