Resuelva el orden de ejecución de setTimeout, Promise, Promise, luego de menos a más profundo.
Si ya está familiarizado con de bucles, alcances , cierres, etc., por favor haz clic en ** aquí " directamente al entrar en el foco **.
Comencemos con un inicio de bucle for simple
for (var i = 1;i <= 5;i ++) {
console.log(i)
}
//1，2，3，4，5
¿Qué pasa si modificamos los requisitos para requerir salida cada segundo ? (Charla francesa)
for (var i = 1;i <= 5;i ++) {
setTimeout(function() {
console.log(i)
},i*1000)
}
//6，6，6，6，6
Así es, genera 6 cada segundo , un total de cinco veces (no 5, hermano, aunque antes pensaba que eran 5).
Entonces, ¿cómo generar el número correspondiente cada segundo?
1 、 ES 6 dejar
for(let i = 0;i<5;i++) {
setTimeout(function timer(){
console.log(i);
}, i * 1000);
}
2. Función de autoajuste
for(let i = 0;i<5;i++) {
+function(i){
setTimeout(function timer() {
console.log(i)
}, i * 1000);
}(i);
}
3. El parámetro extendido de setTimeout (el tercer parámetro)
for (var i=1; i<=5; i++) {
setTimeout( function timer(i) {
console.log(i);
}, i*1000,i );
}
Entonces mira Promise
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('then1')
})
//promise1，then1
Después de ejecutar la Promesa, imprima la promesa1, y luego deje la función .entonces, imprima luego1 (tan fácil ———— Erhage)
Bien, ahora es un poco más complicado ( énfasis ).
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('then1')
})
for (var i = 1;i <= 5;i ++) {
setTimeout(function() {
console.log(i)
},i*1000)
console.log(i)
}
//promise1,1,2,3,4,5
//then1
//6,6,6,6,6
¿Por qué debería dividirse el comentario impreso en tres líneas?
Debido a las tres tareas de la cola:
Cola uno
Ejecutando código -> en la cola de tareas -> función en la Promesa -> Imprimiendo la promesa1-> La Promesa.Entonces () se agrega a una cola para ejecución Promise . then -> en el bucle for -> el setTimeout setTimeout agregado a la cola esperando ser ejecutado - > Imprimir 1, 2, 3, 4, 5
En este punto, se ha impreso la promesa1,1,2,3,4,5, luego1. Ahora hay dos colas, ¿cuál debo elegir primero? Debido a que el temporizador en el ciclo for se ejecuta después de 1000 ms, la función Promise.then () se ejecuta primero
Cola dos
Ejecute la función Promise.then () -> salida then1
Actualmente, las salidas de la consola promesas1,1,2,3,4,5, luego1
Cola tres
Ejecute console.log (i) una vez después de un segundo y ejecútelo 5 veces en total (tenga en cuenta que he realizado un bucle cinco veces en este momento y el valor de esta ejecución es 6 !!! )
Imprimir 6,6,6,6 , 6
Una vez completada la salida, el resultado es: promesa1,1,2,3,4,5, luego 1,6,6,6,6,6
Ahora, vamos a resolverlo ¿Por qué el 1,2,3,4,5 debajo del ciclo for se ejecuta primero en lugar de la función. Then?
Porque involucra la cola de tareas
La cola de tareas se puede dividir en tareas macro y micro tareas. Las devoluciones de llamada de XHR, las devoluciones de llamada de eventos (eventos de mouse y teclado), setImmediate, setTimeout, setInterval, operaciones de base de datos indexedDB y otras E / S son todas tareas macro, y process.nextTick, Promise.then, MutationObserver (nuevas características de html5) son micro tareas.
Orden de la misión : primero en el orden del programa en la ejecución hacia abajo (el código de macro general actual que podemos considerar una tarea), cumplió con la tarea de macro y lo agregó a la cola de tareas correspondiente hasta que se complete la primera ronda de ejecución del código; y Luego ejecute la micro tarea correspondiente.
Por ejemplo, la castaña anterior: la primera vez que se ejecuta la macro tarea, genera la promesa 1, 1, 2, 3, 4, 5, y luego la micro tarea se ejecuta en la salida luego 1, y luego se ejecuta la segunda ronda de la macro tarea, la segunda ronda de la micro tarea ...
Cansado, no sé si lo he dejado claro. Si hay algún problema, debo plantearlo a tiempo, incluso si es un error tipográfico.
Hasta ahora, la castaña básicamente ha terminado, pero ¿qué pasa si setTimeout no se retrasa (0ms) o contiene una nueva Promise dentro?
Entonces, aquí viene el punto
Mi artículo aquí está simplificado en base al artículo del jefe, y el enlace al artículo del jefe se adjunta a continuación.
¿Gángster a través del tren?