Explication détaillée du thread unique et de la boucle d'événement dans JS

Js est monothread et le code js est exécuté séquentiellement de haut en bas. Par exemple, si nous écrivons deux fonctions, la fonction supérieure doit être exécutée en premier et la fonction inférieure sera exécutée plus tard. Mais ce type de thread unique a un très gros problème, c'est-à-dire que lorsqu'il rencontre une tâche fastidieuse, les tâches suivantes ne peuvent qu'attendre la fin de son exécution avant de continuer. Par exemple, une requête ajax obtient des données du serveur, ce qui prend du temps en soi. Si le réseau est plus lent, cela prendra encore plus de temps. Nous ne pouvons alors qu'attendre le retour du résultat. dehors, nous l'exécuterons ensuite. Pendant le processus d'attente, que fera l'utilisateur ? Rien ne peut être fait pendant la phase de rendu, cela empêchera également le rendu de l'interface utilisateur. et l'expérience est trop mauvaise.

Que faire de cette tâche chronophage ? js a décidé de la mettre de côté, d'exécuter d'abord les tâches suivantes, puis de revenir gérer ces tâches chronophages. Cela introduit le concept d'asynchrone, car l'ordre dans lequel nous écrivons le code est incompatible avec l'ordre dans lequel il est exécuté. Il y a trois fonctions ci-dessous, deux fonctions de base et une fonction ajax (pour un fonctionnement asynchrone). Notre ordre d'écriture est ajax -> add -> 🎜>

function add(num1,num2) {    return num1 + num2;
}function subtract(num1,num2) {    return num2 - num1
}function ajax() {    var url = 'http://jsonplaceholder.typicode.com/posts/1';    var xhr = new XMLHttpRequest();
    xhr.open("GET",url); 
    xhr.onload= function () {
        console.log(xhr.responseText)
    }
    xhr.send()
}ajax();

console.log(add(3,5))

console.log(subtract(3,5))

Cela nous amène à une autre question, où sont placées les tâches asynchrones ? Il sera exécuté plus tard. Quand sera-t-il exécuté ? En fait, nous devrions prêter attention à un problème ici. Ce n'est pas notre js qui effectue réellement l'opération ajax, mais le navigateur. C'est la requête http émise par notre navigateur. Lorsque js exécute la fonction ajax, il indique en fait au navigateur d'exécuter la requête http, puis revient immédiatement pour exécuter le code derrière elle, qui correspond aux fonctions d'ajout et de soustraction. Alors, que devons-nous faire une fois que le navigateur a exécuté la requête http et obtenu les données du serveur ? Il exécute ensuite notre fonction de rappel (fonction onload), qui consiste à transmettre les données renvoyées à la fonction de rappel, puis à insérer la fonction de rappel dans la file d'attente des événements (tâches). Lorsque js a fini d'exécuter les fonctions d'ajout et de soustraction, il n'y a rien à faire, il interrogera donc la file d'attente des événements (tâches). Dès qu'il interrogera, il découvrira qu'il existe une fonction de rappel au chargement, puis il la récupérera. et exécutez cette fonction. Pendant l'exécution du programme, js continuera à effectuer une interrogation jusqu'à la fin du programme.

Le code Js est divisé en deux parties pendant l'exécution de l'ensemble du programme. L'une est comme la fonction d'ajout, et l'autre est comme la fonction de rappel ajax onload. L'opération js correspondante est également divisée en deux parties. . Il y a deux parties, l'une est le thread principal et l'autre est la file d'attente des tâches (fonction de rappel asynchrone).

Le fonctionnement spécifique du code js est le suivant :

1. Dès que le code js sera chargé, il sera exécuté séquentiellement de haut en bas, et il entrera dans un Environnement d'exécution global. Lorsqu'il rencontre ajax Lorsqu'il fonctionne de manière asynchrone, il demandera au navigateur d'exécuter la requête, puis reviendra immédiatement pour exécuter le code suivant. Lorsqu'il rencontrera l'appel de fonction add, il entrera dans l'environnement d'exécution de fonction. la fonction d'ajout, il rencontrera à nouveau la fonction de soustraction. Il entrera à nouveau dans l'environnement d'exécution de la fonction. Bien sûr c'est plus simple ici, il n'y a pas de fonctions imbriquées. S'il y a une fonction imbriquée dans la fonction, elle entrera dans l'environnement d'exécution de la sous-fonction, comme le montre la figure ci-dessous, qui forme une pile d'exécution. Une fois la fonction supérieure exécutée, la fonction inférieure est exécutée jusqu'à ce que la fonction soit imbriquée. Code dans l'environnement d'exécution global Une fois l'exécution terminée, la pile d'exécution est vide, qui est le thread principal de js.

　2. Le navigateur exécute la requête http à l'avenir, soit il obtiendra des données du serveur, soit il échouera. À ce moment-là, il signalera le succès de notre. l'enregistrement. Ou la fonction de rappel ayant échoué est placée dans la file d'attente des tâches (fonction de rappel).

　3. Une fois que tout le code de la pile d'exécution est exécuté, c'est-à-dire lorsque la pile d'exécution est vide, js interrogera notre file d'attente de tâches (image à gauche) , S'il y a une tâche, elle retirera la première tâche (fonction de rappel enregistrée) de la position de départ de la file d'attente des tâches et la placera sur la pile d'exécution pour exécution (image de droite). Une fois la fonction de rappel exécutée, la pile d'exécution sera à nouveau vide. js interrogera alors notre file d'attente de tâches, s'il y a une fonction de rappel, elle supprimera la première et la placera sur la pile d'exécution pour exécution. Pendant l'exécution de l'ensemble du programme, js continuera à interroger notre file d'attente de tâches. Une fois qu'il y aura une tâche, elle sera exécutée. C'est la boucle d'événements.

Tous les programmes sont exécutés sur la pile Ce n'est que lorsque la pile d'exécution est vide qu'elle a la capacité de gérer la tâche suivante. Tant qu'une fonction entre dans la pile d'exécution, la pile n'est pas vide. Si la pile n'est pas vide, la fonction suivante ne peut pas être traitée et ne peut qu'attendre que la fonction soit exécutée. C'est ce qu'on appelle « exécuter pour terminer » et ne peut faire qu'une seule chose à la fois. Cela nécessite également que notre fonction de rappel ne puisse pas effectuer trop de tâches, si trop de tâches sont effectuées, la pile ne sera pas vide, ce qui empêchera l'exécution de la tâche suivante, provoquant un blocage.

Ce qui précède est non bloquant en js.

Recommandations associées :

Pourquoi JavaScript est monothread dans le mécanisme d'exécution JavaScript

L'utilisation de JS monothread et multi-thread navigateurs threadés

Explication détaillée du JS natif asynchrone et à thread unique

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!