JS Synchrone et Asynchrone

       La plus grande caractéristique de Java Script est qu'il est  mono- thread . Un seul thread signifie qu'une seule chose peut être faite en même temps. Par exemple, dans un DOM, pour ajouter ou supprimer des éléments, nous ne pouvons qu'ajouter puis supprimer eux, pas en même temps. Un thread unique signifie que toutes les tâches doivent être mises en file d'attente et que la tâche précédente ne peut être exécutée qu'avant la tâche suivante, ce qui peut entraîner un rendu de page incohérent si le code est trop long, un blocage du rendu et du chargement, etc.

Afin de résoudre ce problème, HTML5 a proposé le standard webworker, qui permet à Java Script de créer plusieurs threads, il y a donc une synchronisation et une asynchronie

---

Synchroniser:

Exécutez le code dans l'ordre et exécutez la tâche suivante après la fin de la tâche précédente. La séquence d'exécution du programme est la même que la séquence d'écriture du code.

asynchrone:

Si cela prend beaucoup de temps pour faire une chose, vous pouvez d'abord vous occuper d'autres choses. Par exemple, lorsque nous cuisinons, nous pouvons couper des légumes lorsque l'eau est bouillie, et nous n'avons pas besoin d'attendre que l'eau bout avant. couper les légumes.

Par exemple dans ce code :

 <script>
        window.setTimeout(function(){
               console.log(1);
        },2000)
        console.log(2);
    </script>

Selon l'idée de synchronisation normale, nous penserons certainement que 1 est sorti en premier, puis 2 est sorti séquentiellement, mais en fait, le résultat est que 2 est sorti en premier, puis 1 est sorti.C'est parce que la minuterie est rencontrée lors de l'exécution séquentielle du code, et le temps d'attente est relativement long. Par conséquent, le code suivant est exécuté en premier, et enfin le code de la fonction de rappel de la minuterie est exécuté, ce qui améliore considérablement l'efficacité d'exécution du programme.

---

Processus d'exécution de tâche synchrone et asynchrone :

Tâches de synchronisation : les tâches de synchronisation sont exécutées sur le thread principal , formant une pile d'exécution de thread principal

Tâches asynchrones : les tâches asynchrones sont généralement implémentées via des fonctions de rappel. Les tâches asynchrones ont généralement les types suivants : click, mouseover, focus , etc., ainsi que timer setTimeout, setInterval , etc., les tâches asynchrones ajouteront leurs fonctions de rappel associées au file d'attente de tâches . support (ou file d'attente de messages)

---

Ainsi, le cas tout à l'heure peut être simplement compris comme la figure suivante. Le code est d'abord exécuté de manière synchrone. Après avoir rencontré la fonction de rappel, la fonction de rappel est placée dans la file d'attente des tâches, puis la tâche est ignorée et le code suivant est exécuté en premier , en attendant que le thread principal exécute la pile. Une fois toutes les tâches de synchronisation exécutées, accédez à la file d'attente des tâches pour trouver la fonction de rappel non exécutée à exécuter. Cette abstraction peut être utilisée pour résumer la pile d'exécution du thread principal en tant que voie principale, la file d'attente des tâches comme voie d'urgence et la fonction de rappel comme la voiture en panne à mi-chemin.Quitter la voie principale n'affecte pas la circulation normale, attendez dans la file d'attente des tâches pour réparer les véhicules, puis conduisez de la voie d'urgence à la route principale après tout les véhicules de la voie principale sont partis.

---

Processus d'exécution de tâche avec plusieurs fonctions de rappel :

S'il existe plusieurs fonctions de rappel, la fonction de rappel qui est exécutée en premier dans la file d'attente des tâches devient un problème. À ce stade, un traitement de processus asynchrone est requis.

 <script>
       document.addEventListener('click',function(){
           console.log(1);
       })
        window.setTimeout(function(){
               console.log(2);
        },2000)
    </script>

Par exemple, comment notre programme exécute-t-il ce code ? En fait, avant que la fonction de rappel ne soit passée dans la file d'attente des tâches, elle est traitée par un processus asynchrone. Ce n'est que lorsqu'elle est déclenchée qu'elle sera placée dans la file d'attente des tâches. Si c'est le cas cliqué, sa fonction de rappel sera placée dans la file d'attente des tâches. S'il n'est pas cliqué, il n'y sera pas mis. Un autre exemple est le deuxième minuteur. Après deux secondes, sa fonction de rappel sera placée dans la file d'attente des tâches.

 Une fois le thread principal terminé, il se rend constamment dans la liste des tâches pour obtenir de nouvelles tâches de fonction de rappel, puis les exécute, puis les obtient et les exécute à nouveau.Cette étape est appelée boucle d' événement boucle d'événement