Diagrama esquemático
Las funciones de devolución de llamada ejecutadas de forma asincrónica tienen una característica común: se pondrán en la cola en el momento adecuado. Veamos qué tipos de funciones de devolución de llamada se colocan en la cola de macros y cuáles se colocan en la cola de micro.
Cada devolución de llamada en la cola de macros se llama una tarea macro, y cada devolución de llamada en la cola de micro se llama una tarea micro
-
Cola de macros: se utiliza para almacenar las tareas macro que se ejecutarán (devolución de llamada)
- devolución de llamada de evento dom
- devolución de llamada ajax
- Temporizador de devolución de llamada
-
Micro cola: se utiliza para almacenar micro tareas a ejecutar (devolución de llamada)
- promesa de devolución de llamada
- devolución de llamada de mutación
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback");
}, 0);
Promise.resolve(1).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved()', value);
}
)
Puede ver que la siguiente promesa se ejecuta primero y luego se ejecuta después de settimeout
¿Agrega una más? ?
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 1");
}, 0);
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 2");
}, 0);
Promise.resolve(1).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved1()', value);
}
)
Promise.resolve(2).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved2()', value);
}
)
Puede ver que la promesa se ejecuta primero y la ejecución se ejecuta después de settimeout
El motor JS es una ejecución de un solo subproceso, la ejecución de un solo subproceso significa que solo se puede hacer una cosa en un momento determinado. En otras palabras, su proceso general básico se divide en dos pasos:
- Primero ejecute todo el código de sincronización
- Luego ejecute la función de devolución de llamada en la cola
Existe otra posibilidad de que el código de sincronización de inicialización aún no se haya ejecutado y haya una función de devolución de llamada en la cola. Pero la función de devolución de llamada en la cola no se ejecutará, porque solo hay una línea ( la función de devolución de llamada en la cola solo se puede ejecutar después de que se ejecute todo el código de sincronización )
Al ejecutar la función de devolución de llamada en la cola, primero ejecute la micro cola y luego ejecute la macro cola
Cuando se ejecuta JS, se distinguen estas dos colas:
- El motor JS primero debe ejecutar todo el código de sincronización de inicialización
- Cada vez que se prepare para sacar la primera macro tarea para su ejecución, saque todas las micro tareas una por una para ejecutarlas
¿Cómo entender la oración anterior? Aspecto de código
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 1");
Promise.resolve(3).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved3()', value);
}
)
}, 0);
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 2");
}, 0);
Promise.resolve(1).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved1()', value);
}
)
Promise.resolve(2).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved2()', value);
}
)
Descripción:
Puede ver la implementación de la primera Promise onResolved1()y Promise onResolved2()dos micro tareas, y luego ejecutar la macro tarea timeout callback 1, luego encontró una macro tarea que contiene una micro tarea Promise onResolved3(), por lo que la primera implementación de esta micro tarea Promise onResolved3()después de la tarea para ir a la siguiente macrotimeout callback 2