Analyse détaillée de la compréhension du mécanisme d'événement JavaScript

Ce que cet article vous apporte, c'est une analyse détaillée de la compréhension du mécanisme des événements JavaScript.Il a une certaine valeur de référence.Les amis dans le besoin peuvent s'y référer.J'espère qu'il vous sera utile.

Divisé selon la synchronisation et l'asynchronisme

• Déterminez d'abord si JS est synchrone ou asynchrone. S'il est synchrone, il entrera dans le processus principal, s'il est asynchrone, elle entrera dans la table des événements

• La tâche asynchrone enregistre la fonction dans la table des événements lorsque la condition de déclenchement est remplie, elle est poussée dans la file d'attente des événements

<.>
• La tâche synchrone entre dans le thread principal et est exécutée jusqu'à ce que le thread principal soit inactif, ira dans la file d'attente des événements pour voir s'il existe des tâches asynchrones exécutables, et si c'est le cas, les poussera dans le processus principal

Divisé en macro-tâches et micro-tâches (plus précises)

• macro-tâche (macro-tâche) : comprenant le script de code global, setTimeout, setInterval, setImmediate, E/S, rendu de l'interface utilisateur

• micro-tâche (Microtask) : Promise.then, process.nextTick

De nombreux endroits marquent Promise comme une microtâche , mais cela peut facilement faire croire à tort que le processus est une microtâche lorsqu'une nouvelle promesse est émise. En fait, Promsie.then et Promise.catch sont des microtâches. New Promise est traité comme un objet généré ordinaire, donc ici je le marque comme Promise.then

• pour exécuter cette série de tâches macro

• Si vous rencontrez une microtâche pendant le processus, s'il s'agit d'une tâche synchrone, placez-la dans la [File d'attente des événements] de la microtâche, et placez-la de manière asynchrone dans la [Table des événements ] de la microtâche. Enregistrez la fonction, remplissez les conditions d'exécution et poussez-la dans la microtâche [file d'attente des événements] (jusqu'à présent, je ne sais pas si les microtâches ont des tâches asynchrones)

• Lorsque vous rencontrez une tâche macro, il s'agit d'une tâche synchrone. Placez-la dans la [file d'attente des événements] de la tâche macro, placez-la de manière asynchrone dans la tâche macro [table des événements], enregistrez la fonction, remplissez les conditions d'exécution et poussez-la dans. la tâche macro [file d'attente des événements]

• Après l'exécution de cette série de tâches macro, vérifiez la [file d'attente des événements] des micro-tâches et exécutez toutes les micro-tâches dans séquence et exécutez la prochaine série de tâches de macro à partir des tâches de macro [File d'attente d'événements]

Connaissances connexes

• Thread unique JS, il y a une seule boucle d'événement unique dans ce fil

• Dans un fil, la boucle d'événement est unique, mais il peut y avoir plusieurs files d'attente de tâches (il n'y a qu'une seule file d'attente de micro-tâches)

• Les files d'attente de tâches sont divisées en files d'attente de macro-tâches et en files d'attente de micro-tâches

Ensuite, la question est, lorsqu'il y a plusieurs tâches de macro dans la file d'attente, quelle tâche de macro devrait-il être sélectionné pour le prochain voyage ? Dans la méthode ci-dessus, je considère toutes les tâches macro comme une file d'attente

Exemples

/* example1 */
setTimeout(function () {
    console.log(1);
},7);

new Promise(function (resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
        i == 99 && resolve();
    }
}).then(function () {
    console.log(3);
    setTimeout(() => {
        console.log(4);
    });
})

console.log(5);
// 2 3 5 （4 7） 后两个数字的顺序与两定时器的delayTime有关，谁先满足触发条件就先输出谁 （html5 标准中，规定delayTime >= 4ms）

/* example2 */
setTimeout(_ => console.log(4));

new Promise(resolve => {
    resolve()
    console.log(1)
}).then(_ => {
    console.log(3)
    Promise.resolve().then(_ => {
        console.log('before timeout')
    }).then(_ => {
        Promise.resolve().then(_ => {
            console.log('also before timeout')
        })
    })
})

console.log(2);
// 这个也不难，分析分析就出结果了

enfin

Pour résumer, la deuxième question d'un novice

• Y a-t-il des tâches asynchrones dans la file d'attente des événements de microtâches ?

• Il existe plusieurs files d'attente d'événements de macrotâches. De quelle file d'attente d'événements de macrotâches doit être extraite pour la prochaine série de macrotâches ?

Recommandations associées :

Détails du mécanisme de boucle d'événements JavaScript - Conférence 2

Événements du mécanisme d'exécution JavaScript et fonctions de rappel

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!