prefacio
JavaScript es un lenguaje débilmente tipificado de un solo subproceso, pero en nuestro desarrollo, a menudo encontramos algunas operaciones de procesamiento que deben ser asincrónicas o esperadas. Similar a ajax, o la nueva operación de promesa en ES6 se usa para manejar algunas funciones de devolución de llamada, etc.
concepto
En el proceso de ejecución del código JavaScript, se puede dividir en cola síncrona y cola asíncrona.
-
La tarea de sincronización es similar a la función de ejecución inmediata que solemos decir, se puede realizar directamente sin esperar y se puede ejecutar directamente en el subproceso principal, de forma similar a las llamadas a funciones normales.
-
La cola asíncrona es una función de ejecución asíncrona, similar a la solicitud ajax. En el proceso de inicio, ingresaremos a una cola asíncrona. Al cargar la tarea, debemos esperar antes de procesar el valor devuelto.
tomar una castaña
En el siguiente código, primero podemos entender algunos principios básicos del mecanismo de bucle de eventos
console.log('1');
setTimeout(function() {
console.log('4');
}, 0);
Promise.resolve().then(function() {
console.log('2');
}).then(function() {
console.log('3');
});
console.log('5');
Imprimimos el código a la consola y la salida es: 1, 5, 2, 3, 4
Sabemos que en JavaScript, los temporizadores similares y las nuevas promesas de ES6 son funciones asíncronas. Volviendo al concepto de colas que mencionamos anteriormente, no es difícil deducir que 1 y 5 son colas de ejecución síncrona.
Después de que se ejecuta el código en la cola síncrona, se ejecuta el código en la cola asíncrona.
PROPINA
Al analizar la promesa y el temporizador de la cola asíncrona, encontramos que el temporizador setTimeout se ejecuta después de la promesa Aquí presentamos la macro tarea** (Macro Task**) y la microtarea** (Micro Task)* en JavaScript especificación *el concepto de
En JavaScript, las tareas de macro incluyen: secuencia de comandos (código general), setTimeout, setInterval, I/O, eventos de interacción de UI, setImmediate (entorno Node.js)
Microtareas : Promise, MutaionObserver, process.nextTick (entorno Node.js)
Volviendo al problema de los temporizadores y las promesas anteriores, en este momento sabemos que en JavaScript, cuando hay una cola asíncrona, primero se ejecutan las microtareas y luego se ejecutan las macrotareas.
dar una castaña otra vez
Si hay una cola asíncrona en la cola asíncrona, ¿qué debemos hacer?
console.log(1);
setTimeout(function() {
console.log(5);
}, 10);
new Promise(resolve => {
console.log(2);
resolve();
setTimeout(() => console.log(3), 10);
}).then(function() {
console.log(4);
})
console.log(6);
Ejecute el código en la consola y el orden de impresión resultante es: 1,2,6,4,5,3
-
A diferencia de la promesa del ejemplo 1, la impresión 2 se ejecuta con prioridad sobre la 6, por lo que podemos saber que durante la ejecución de la nueva Promesa, el código ejecutado antes de resolver o rechazar es el código en la cola de sincronización.
-
Mirando el orden de ejecución de 4, 5 y 3, después de ejecutar la promesa de microtarea y ejecutar la resolución de devolución de llamada, el correspondiente entonces se ejecuta inmediatamente
-
En el resultado de la impresión, el temporizador 5 se ejecuta preferentemente en ----> la macro tarea del temporizador 3 perteneciente a la micro tarea promesa.La macro tarea del temporizador 5 se agrega después de la cola de la microtarea promesa, y la ejecución de la promesa está completa Después de la devolución de llamada, la macro tarea en la promesa se agrega a la cola, por lo que se ejecuta después del temporizador 5
Resumir
En JavaScript, las tareas de macro incluyen: secuencia de comandos (código general), setTimeout, setInterval, I/O, eventos de interacción de UI, setImmediate (entorno Node.js)
Microtareas : Promise, MutaionObserver, process.nextTick (entorno Node.js);
Durante el proceso de ejecución, el código de sincronización tiene prioridad sobre el código en otras colas de tareas, tareas como temporizadores y promesas. Durante el proceso de ejecución, se agregará a la cola primero, y después de que se ejecute el código de sincronización, las tareas de macro y las microtareas se clasifican según la clasificación. , ejecute primero la cola de microtareas y luego ejecute la cola de macrotareas.
Dirección del blog personal del artículo: mecanismo de bucle de eventos de JavaScript