Problèmes avec l'ordre d'exécution de promise et setTimeout en JavaScript (exemple de code)

Ce que cet article vous apporte concerne l'ordre d'exécution de promise et setTimeout en JavaScript (exemples de code). Les amis dans le besoin peuvent s'y référer.

Promise est un standard de langage introduit par es6 et une solution pour la programmation asynchrone

La condition préalable à la lecture de cet article est de comprendre le mécanisme de la boucle d'événements du navigateur, ainsi que son utilisation de base ; de promesse et de fonctionnalités, telles que sa fonction d'auto-exécution, sa fonction d'irréversibilité d'état, etc.

Lance un problème

Regardez le code et le problème suivants

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 这的问题是，为什么答案是 2 3 5 4 1
// 而不是 2 3 5 1 4

Puisque promise.then et setTimeout sont tous deux asynchrones, alors l'événement de promise.then doit être classé derrière setTimeout dans la file d'attente des boucles d'événements, alors pourquoi promise.then est-il imprimé avant setTimeout ?

Concepts importants

Le concept de boucle d'événements

• Javascript est monothread et toutes les tâches de synchronisation seront exécutées dans le thread principal.

• Une fois toutes les tâches du thread principal exécutées, le système lira « séquentiellement » les événements dans la file d'attente des tâches. La tâche asynchrone correspondante entre dans le thread principal et commence son exécution.

• Il y aura des différences entre les tâches asynchrones, donc leurs priorités d'exécution seront également différentes. Elles sont grossièrement divisées en micro-tâches (micro-tâches, telles que Promise, MutaionObserver, etc.) et macro-tâches (macro-tâches, telles que setTimeout, setInterval, I/O, etc.).

• Le code dans l'exécuteur Promise sera appelé de manière synchrone, mais les rappels sont basés sur des microtâches.

• Les macro-tâches ont une priorité plus élevée que les micro-tâches

• Après l'exécution de chaque macro-tâche, la file d'attente actuelle des micro-tâches doit être effacée

• Le code de la première balise de script est la première tâche macro

• Le thread principal continuera à répéter les étapes ci-dessus jusqu'à ce que toutes les tâches soient exécutées.

Ma compréhension

Parcourons le processus d'exécution du code

Tout le code est écrit dans la balise script, alors lisez tout. le code est la première tâche macro et nous commençons à exécuter la première tâche macro.

Nous rencontrons d'abord setTimeout, qui est la deuxième macrotâche. Nous la jetons dans la file d'attente des événements de macrotâche et la mettons en file d'attente en premier.

Ensuite, nous rencontrons une promesse. Le code dans l'exécuteur de promesse sera appelé de manière synchrone, nous imprimons donc 2 et 3 dans l'ordre.

Lorsque vous rencontrez le rappel de promise, il s'agit d'une microtâche et jetez-la dans la file d'attente des événements de microtâche.

Ensuite, nous imprimons 5, puis exécutons la microtâche et imprimons 4.

Notre première tâche macro est terminée, exécutons la tâche macro suivante et imprimons 1. À ce stade, Toutes les tâches sont exécutées.

Notre résultat final est donc 2 3 5 4 1.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!