Una breve discusión sobre el mecanismo de bucle de eventos en JS.

1. En el mecanismo de bucle de eventos de JS, primero recuerde una fórmula de secuencia de ejecución: [Igual] -> [Micro] -> [Macro]

1 sincronización: ciudadano de primera clase (SVIP)

2 microtareas: ciudadano de segunda clase (VIP)

3 Macrotareas: Ciudadanos de tercera (usuarios comunes)

2. ¿Cuál es el mecanismo de bucle de eventos?

En pocas palabras, una vez completada la ejecución en la pila de ejecución (el código insertado en la pila se ejecuta primero), luego busca microtareas para ejecutar y finalmente busca macrotareas para ejecutar.

Todo lo que ingresa a estas tres pilas se llama cola de tareas.

Puedes buscar contenido específico tú mismo, hay demasiados en línea.

3. ¿Cómo ingresar a las respectivas colas?

El orden de ejecución del programa es de arriba a abajo, se ejecuta sincrónicamente (ejecutado línea por línea), si encuentra asincrónico, se omitirá (asincrónico esperará la ejecución por sí mismo, como ajax, settimeout, promesa.then() Tenga en cuenta que no me refiero a Promse, sino al método promesa.then() que utilizamos a menudo).

3.1 Cola síncrona:

donde yo =0;

función(){}

consola(),

promesa (), la promesa en sí es un ciudadano de primera clase de la misma función. Es sincrónico porque es una función, por lo que el contenido interno se ejecuta primero, pero promesa.luego (), promesa.catch (), promesa.finalmente ( ) Tres son microtareas, solo recuérdalas.

Otro código js normal

3.2 Cola de microtareas

promesa.entonces(), promesa.catch(), promesa.finalmente(), estos tres hermanos pertenecen a la misma familia, solo escríbelo así

awaityasync

注意:微任务可没有Promise()人家是一等公民

3.3 宏任务列队

establecer familia:setTimeoutsetIntervalsetImmediate(NodeJs),

注意:setTimeout有个规定,时间小的优先执行,且其子内容都一起优先进入队列中

 I/O

UI rendering

dom事件

ajax

===========(Desmontaje completado)=================================== = ==

No pierdas el tiempo creciendo.

Cuarto, prueba para ver cómo distinguir y hacer las preguntas.

4.1


console.log(1)

setTimeout(function(){
    console.log(4);
})
console.log(5)

Este es simple: 1 5 4 

Ingrese la pila en orden

1 cola de sincronización

consola.log(1)

consola.log(5)

2 establecer tiempo de espera()

4.2


console.log(1)

setTimeout(function(){
    console.log(100);
},500)

setTimeout(function(){
    console.log(300);
},100)


console.log(5)

Respuesta

1,5,300,100

Prioridad de ejecución más corta

4.3 

console.log(1);
console.log(2);

setTimeout(function(){
    console.log(3);
    setTimeout(function(){
        console.log(6);
    })
})
setTimeout(function(){
    console.log(4);
    setTimeout(function(){
        console.log(7);
    })
})
console.log(5)

Respuesta

1,2,5, 3,4 , 6,7

Sincronización: 1, 2, 5

Microfono: Ninguno

Macro: la primera capa setTimeout (3, 4), y luego ejecuta el setTimeout interno, debido a que no hay tiempo, todavía ingresa a la cola de arriba a abajo, y debido a que los avanzados se ejecutan primero, 6 viene primero, por lo que el el resultado es 6, 7

4.4 

console.log(1);
console.log(2);

setTimeout(function(){
    console.log(3);
    setTimeout(function(){
        console.log(6);
    })
},400)
setTimeout(function(){
    console.log(4);
    setTimeout(function(){
        console.log(7);
    })
},100)
console.log(5)

 Respuesta:

1,2,5

4, 7 (son cortos, se colocan primero en la pila y se ejecutan primero)

3, 6 (mucho tiempo, ejecutado más tarde)

Como se mencionó hace un momento, el setTimeout con el tiempo más corto se ejecuta primero y los subcontenidos también se ingresan juntos en la pila, por lo que 4 y 7 se generan primero, y luego se ejecuta el primer setTimeout: 3, 6.

 4.5


console.log(1)

let promise = new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(data){
    console.log(data)
})

setTimeout(function(){
    console.log(4);
})

console.log(5)

Respuesta

1,2,5 

3 El método promet.then() es una microtarea, es decir, se ejecuta primero (igual->micro->macro)

4 macrotareas 

promesa (), es una función ordinaria, un ciudadano de primera clase , por lo que debe insertarse en la pila sincrónicamente, es decir, ejecutarse primero, por lo que debe generar 1, 2 y luego 5

Pero promet.then() es una microtarea, y debido a que es lo mismo que -> micro-> macro, genera 3 (3 se debe a que hay resolución (3) en la promesa) y finalmente genera 4

Finalmente, resumamos y revisemos:

  1. Todas las tareas de sincronización se ejecutan en el hilo principal, formando una pila de ejecución.

  2. Además del hilo principal, también hay una cola de tareas. Siempre que la tarea asincrónica tenga resultados en ejecución, se coloca un evento en la cola de tareas.

  3. Una vez que se ejecutan todas las tareas de sincronización en la pila de ejecución, el sistema leerá la cola de tareas y colocará los eventos de la cola en la pila de ejecución para su ejecución secuencial.

  4. El hilo principal lee eventos de la cola de tareas y este proceso es cíclico.

 Recuerde: [Igual]->[Micro]->[Macro]

Supongo que te gusta

Origin blog.csdn.net/tdjqqq/article/details/124384974
Recomendado
Clasificación