Debido a que js es un lenguaje de un solo subproceso, cuando se encuentran tareas asincrónicas (como operaciones ajax, etc.), es imposible esperar a que se complete la asincrónica y continuar con la ejecución. Durante este período, el navegador está inactivo. Obviamente, esto conducirá a un enorme desperdicio de recursos.
Pila de ejecución
Cuando se ejecuta una función, el usuario hace clic con el mouse una vez, se completa Ajax, se completa la carga de una imagen y ocurren otros eventos, siempre que se especifique la función de devolución de llamada, estos eventos ingresarán a la cola de la pila de ejecución cuando ocurran, esperando el hilo principal para leer, siga primero en entrar primero Fuera de principio.
Hilo principal
Una cosa que debe quedar clara es que el hilo principal es un concepto diferente al de la pila de ejecución.El hilo principal especifica qué evento en la pila de ejecución se está ejecutando actualmente.
Bucle de subproceso principal: es decir, el subproceso principal leerá continuamente eventos de la pila de ejecución y ejecutará todos los códigos de sincronización en la pila.
Cuando se encuentra un evento asincrónico, no siempre esperará a que el evento asincrónico devuelva el resultado, sino que colgará el evento en una cola diferente de la pila de ejecución, que llamamos Task Queue.
Después de que el subproceso principal ejecuta todo el código en la pila de ejecución, el subproceso principal verificará si hay tareas en la cola de tareas . Si es así, el hilo principal ejecutará las funciones de devolución de llamada en la cola de tareas a su vez.
El orden de ejecución del código js, new Promise, Promise.then, Promise.all (). Then (), process.nextTick en el alcance global
Dado que la nueva Promesa se ejecutará inmediatamente, el código interno se ejecutará en secuencia. El orden correspondiente es: código js secuencial -> nueva Promesa -> código js secuencial (después de la ejecución de js globales y nueva Promesa) -> todo el proceso.nextTick -> Promise (). Luego () -> Promise.all (). Luego ()
console.log(1);// 顺序-1
Promise.all([new Promise(resolve => {
console.log(2);// 顺序-2
resolve(100);
})]).then(values => {
console.log(values);// 顺序- 10
});
process.nextTick(() => {
console.log(6);// 顺序- 6
});
new Promise((resolve) => {
console.log(3);// 顺序-3
resolve('3-1');
}).then(values => {
console.log(values);// 顺序- 8
});
console.log(4);// 顺序- 4
new Promise((resolve) => {
console.log(5);// 顺序- 5
resolve('5-1');
}).then(values => {
console.log(values);// 顺序- 9
})
process.nextTick(() => {
console.log(7);// 顺序- 7
})
Implica setTimeout, y el temporizador tiene nuevas Promise, Promise.then y Promise.all.
La orden de ejecución de este caso se ejecuta después de que se haya ejecutado el primer caso. La secuencia de ejecución es:
varios temporizadores tienen el mismo tiempo: setTimeout se ejecuta en orden. El orden de ejecución en el temporizador es ejecutar el código js secuencialmente -> nueva Promesa -> código js ordenado (después de que se ejecuten js y la nueva Promesa) -> todo el proceso.nextTick -> Promise (). Luego () -> Promise.all (). Luego (). En realidad, se repite el orden de ejecución en el primer caso.
setTimeout(() => {
console.log("setTimeout1");// 顺序-- 1
new Promise((resolve) => {
console.log('setTimeout1 --- Promise');// 顺序-- 2
resolve('Promise-1');
}).then((values) => {
console.log(values);// 顺序-- 5
});
}, 0)
setTimeout(() => {
console.log("setTimeout2");// 顺序-- 3
new Promise((resolve) => {
console.log('setTimeout2 --- Promise');// 顺序-- 4
resolve('Promise-2');
}).then((values) => {
console.log(values);// 顺序-- 6
});
}, 0)
Tarea macro y micro tarea
Para las tareas en la cola de mensajes, se dividen en dos categorías:
- Macrotask (macrotask): setTimeout, setInterval
- Microtask: promesa
La macro tarea contiene la micro tarea, y se completa la ejecución de una macro tarea y se inicia la siguiente macro tarea.
console.log("a")
let r = new Promise(function (resolve, reject) {
console.log("b");
resolve()
});
r.then(() => console.log("c"));
setTimeout(() => {
console.log("d") }, 0)
setTimeout(() => {
console.log("e") }, 1000)
console.log("f")
Mira estas pocas líneas de código
- Comenzó a ejecutar, encontró un código, lo puso en una tarea macro
- Ejecuta una primera
- Ejecutar b
- Se encuentra que la operación asincrónica pertenece a la micro tarea y se agrega a la cola de la micro tarea en la macro tarea actual.
- Se encuentra que el temporizador dy setTimeout pertenecen a la tarea macro y se agregan a la cola de tareas macro
- Se encuentra que el temporizador ey setTimeout pertenecen a la tarea macro y se agregan a la cola de la tarea macro.
- Ejecutar f
- El código se ha ejecutado, comience a ejecutar la cola de micro tareas e imprima c
- Se completa la ejecución de la cola de micro tareas y se ejecuta la siguiente cola de macrotareas.
- Imprima d directamente, no hay otras micro tareas y comience a ejecutar la siguiente cola de macro tareas
- Imprime e, todas las tareas macro están completadas