Comprendre la synchronisation et l'asynchronisme dans js

Le contenu partagé avec vous dans cet article porte sur la compréhension de la synchronisation et de l'asynchronisme en js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Vous devez savoir que le langage javascript est un langage javascript. Le langage "Single-thread" n'est pas comme le langage Java. La classe hérite de Thread et utilise ensuite thread.start pour ouvrir un thread. Par conséquent, javascript est comme une chaîne d'assemblage, juste Une chaîne d'assemblage n'est qu'une seule, qu'elle soit de transformation ou d'emballage, et ne peut pas effectuer plusieurs tâches et processus en même temps.

Alors, quels sont les synchrones et asynchrones mentionnés ici ? Si vous ne comprenez vraiment pas, j’espère que vous lirez attentivement cet article. En fait, je pense personnellement que les documents officiels js ne sont pas précis lorsqu'ils utilisent deux mots, y compris de nombreux autres mots, qui ne semblent que sophistiqués, mais l'application réelle semble n'avoir rien à voir avec ces mots. Par exemple, si vous ne connaissez pas le mot « Délégation d'événement », qui peut dire ce que « Délégation d'événement » au premier coup d'œil ? Quel événement est délégué ? Quel genre de délégation ? Je pense qu’il vaut mieux l’appeler simplement « capture d’événements dans des éléments extérieurs ». Même si c’est un peu plus long, vous pouvez le comprendre tout de suite.

De retour sur la bonne voie, « synchronicité » - rappelle immédiatement aux gens le mot « ensemble » ; « asynchrone », littéralement parlant, semble faire quelque chose de différentes (différentes) manières, alors le premier mot qui vient à l'esprit. l'esprit peut être "pendant... pendant que...", par exemple, "Xiao Ming mange de la glace et fait ses devoirs en même temps". Il n'y a rien de mal à cela. Après avoir mangé la glace, il a également fini sa. les devoirs. Est-ce asynchrone ? Ce serait une grosse erreur !

En fait, synchrone et asynchrone, quoi qu'il arrive, il n'y a qu'un seul pipeline (un seul thread) pour faire les choses La différence entre synchrone et asynchrone réside dans l'ordre d'exécution de chaque processus. sur ce pipeline. Différent.

Les fonctions asynchrones les plus basiques sont les fonctions setTimeout et setInterval, qui sont très courantes, mais peu de gens savent qu'il s'agit en fait d'une fonction asynchrone, car elles peuvent contrôler l'ordre d'exécution de js. On peut aussi simplement comprendre que les opérations qui peuvent modifier la séquence d'exécution normale du programme peuvent être considérées comme des opérations asynchrones. Le code suivant :

<script type="text/javascript">
        console.log( "1" );
        setTimeout(function() {
            console.log( "2" )
        }, 0 );
        setTimeout(function() {
            console.log( "3" )
        }, 0 );
        setTimeout(function() {
            console.log( "4" )
        }, 0 );
        console.log( "5" );
</script>

Quel est l'ordre de sortie ?

On peut voir que même si nous définissons le temps d'attente dans setTimeout(function, time) sur 0, la fonction qu'il contient est toujours exécutée plus tard.

La documentation de l'API du navigateur Firefox contient cette phrase : Parce que même si setTimeout était appelé avec un délai de zéro, il est placé dans une file d'attente et programmé pour s'exécuter à la prochaine occasion, pas immédiatement. Le code actuellement en cours d'exécution doit se terminer avant que les fonctions de la file d'attente ne soient exécutées, l'ordre d'exécution résultant peut ne pas être celui prévu.

signifie : même si le délai de setTimeout est de 0, la fonction sera mise dans une file d'attente, en attendant la prochaine opportunité d'être exécutée, le code actuel (faisant référence (il n'est pas nécessaire de rejoindre un programme dans une file d'attente) doit se terminer avant la fin du programme dans cette file d'attente, de sorte que les résultats peuvent ne pas être les mêmes que ceux attendus.

Ici, nous parlons d'une "file d'attente" (c'est-à-dire une file d'attente de tâches). Qu'est-ce qui est placé dans la file d'attente, c'est la fonction dans setTimeout. Ces fonctions sont ajoutées à la file d'attente à leur tour. est, parmi toutes les fonctions de la file d'attente Le programme sera exécuté une fois que tout le code en dehors de la file d'attente aura été exécuté. Pourquoi est-ce ? Parce que lors de l'exécution d'un programme, le navigateur utilisera par défaut des méthodes telles que setTimeout et les requêtes ajax en tant que programmes chronophages (bien qu'elles ne prennent peut-être pas beaucoup de temps), et les ajoutera à une file d'attente, qui est une file d'attente qui stocke des programmes chronophages. programmes , une fois tous les programmes qui ne prennent pas de temps exécutés, les programmes dans la file d'attente sont exécutés dans l'ordre.

Retour au point de départ d'origine : javascript est monothread. Un seul thread signifie que toutes les tâches doivent être mises en file d'attente et que la tâche suivante ne sera exécutée que lorsque la tâche précédente sera terminée. Si la tâche précédente prend beaucoup de temps, la tâche suivante devra attendre. Il existe donc un concept : la file d'attente des tâches. Si la file d'attente est due à une grande quantité de calculs et que le processeur est trop occupé, oubliez-le, mais le processeur est souvent inactif car les périphériques IO (périphériques d'entrée et de sortie) sont très lents (par exemple, les opérations Ajax lisent les données de le réseau) et doivent attendre que les résultats soient connus avant de continuer. Ainsi, les concepteurs du langage JavaScript ont réalisé qu'à ce moment-là, le thread principal pouvait ignorer complètement le périphérique IO, suspendre les tâches en attente et exécuter les tâches ultérieures en premier. Attendez que le périphérique IO renvoie le résultat, puis revenez en arrière et poursuivez l'exécution de la tâche suspendue.

Par conséquent, toutes les tâches peuvent être divisées en deux types, l'une est une tâche synchrone (synchrone) et l'autre est une tâche asynchrone (asynchrone). Les tâches synchrones font référence aux tâches mises en file d'attente pour exécution sur le thread principal. La tâche suivante ne peut être exécutée qu'après l'exécution de la tâche précédente ; les tâches asynchrones font référence aux tâches qui n'entrent pas dans le thread principal mais entrent uniquement dans la « file d'attente des tâches ». lorsque la tâche du thread principal est terminée et que la « file d'attente des tâches » commence à notifier le thread principal et à demander l'exécution de la tâche, la tâche entrera dans le thread principal pour exécution.

Plus précisément, le mécanisme de fonctionnement asynchrone est le suivant :

(1) Toutes les tâches synchrones sont sur le principal thread Execution, formant une pile de contexte d'exécution.
(2) En plus du fil de discussion principal, il existe également une "file d'attente des tâches". Tant que la tâche asynchrone a des résultats en cours d'exécution, un événement est placé dans la « file d'attente des tâches ».
(3) Une fois que toutes les tâches de synchronisation dans la "pile d'exécution" sont terminées, le système lira la "file d'attente des tâches" pour voir quels événements s'y trouvent. Les tâches asynchrones correspondantes mettent fin à l'état d'attente, entrent dans la pile d'exécution et démarrent l'exécution.
(4) Le fil principal continue de répéter la troisième étape ci-dessus.

Tant que le thread principal est vide, il lira la "file d'attente des tâches". C'est le mécanisme d'exécution de JavaScript. Ce processus ne cesse de se répéter.

La « file d'attente des tâches » est une file d'attente d'événements (peut également être comprise comme une file d'attente de messages). Lorsque le périphérique IO termine une tâche, un événement est ajouté à la « file d'attente des tâches » pour représenter l'asynchrone associé. La tâche peut entrer dans la « pile d'exécution ». Le thread principal lit la "file d'attente des tâches", ce qui signifie lire les événements qu'elle contient.
Les événements de la "file d'attente des tâches", en plus des événements du périphérique IO, incluent également certains événements générés par l'utilisateur (tels que les clics de souris, le défilement de page, etc.), tels que $(selectot).click(function), ce sont des opérations relativement longues. Tant que les fonctions de rappel de ces événements sont spécifiées, lorsque ces événements se produisent, entrera dans la "file d'attente des tâches" et attendra que le thread principal soit lu.
La soi-disant "fonction de rappel" (callback) est le code qui sera suspendu par le thread principal. La fonction dans l'événement click $(selectot).click(function) mentionné plus haut est une fonction de rappel. Les tâches asynchrones doivent spécifier une fonction de rappel. Lorsque le thread principal commence à exécuter une tâche asynchrone, la fonction de rappel correspondante est exécutée. Par exemple, les fonctions success, complete et error d'ajax spécifient également leurs propres fonctions de rappel. Ces fonctions seront ajoutées à la "file d'attente des tâches" et attendront leur exécution.

Recommandations associées :

synchronisation js et asynchrone

Synchronisation JavaScript, asynchrone, analyse de la séquence d'exécution de rappel

Compréhension approfondie de la synchronisation et des mécanismes asynchrones dans la programmation JavaScript

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!