Comprendre synchrone et asynchrone en JavaScript - Partie 2

Dans la première partie de ce post, nous avons vu comment le concepts de synchrone et asynchrone sont perçus en JavaScript. Dans cette seconde partie, M. X apparaît à nouveau pour nous aider à comprendre comment le setTimeout et AJAX Apis travail.

Une demande étrange

Revenons à l'histoire de M. X et au film pour lequel vous voulez partir. Dites que vous laissez une tâche à M. X avant la sortie et dites-lui qu'il ne peut que commencer à travailler sur cette tâche cinq heures après il a eu ton message.

Il n’est pas content, souvenez-vous, il ne prend pas un nouveau message avant d’avoir fini avec le message actuel, et s’il prend le vôtre, il doit attendre cinq heures même pour commencer sur la tâche. Donc, pour ne pas perdre de temps, il apporte une aide, Mr H.

Au lieu d'attendre, il demande à M. H de laisser un nouveau message pour la tâche dans la file d'attente après les heures données passées, et passe au message suivant.

Cinq heures après Mr H met à jour la file d'attente avec un nouveau message. Après avoir traité tous les messages accumulés avant M. H, M. X effectue votre tâche demandée. Ainsi, de cette façon, vous pouvez laisser une demande pour être respecté plus tard, et ne pas attendre jusqu'à ce qu'il soit rempli.

Mais pourquoi M. H laisse-t-il un message dans la file d'attente au lieu de contacter directement M. X? Parce que, comme je l'ai mentionné dans la première partie, le seulement façon de contacter M. X est en lui laissant un message par appel téléphonique - aucune exception.

1. Le setTimeout () méthode

Supposons que vous ayez un ensemble de code que vous voulez exécuter après un certain temps. Pour ce faire, vous venez de envelopper dans une fonction, et l'ajouter à un setTimeout () méthode avec le temps de retard. La syntaxe de setTimeout () est comme suit:

 setTimeout (fonction, délai, argument…) 

le arg… paramètre représente tout argument pris par la fonction, et temporisation doit être ajouté en millisecondes. Ci-dessous, vous pouvez voir un exemple de code simple, qui affiche “Hey” dans la console après 3 secondes.

 setTimeout (function () console.log ('hey'), 3000); 

Une fois que setTimeout () commence à courir, au lieu de bloquer la pile d'appels jusqu'à ce que le délai indiqué soit écoulé, une la minuterie est déclenchée, et la pile d'appels est progressivement vidée pour le message suivant (comme pour la correspondance entre M. X et M. H).

Lorsque le délai expire, un nouveau message rejoint la file d'attente, et la boucle d'événement la récupère lorsque la pile d'appels est libre après le traitement de tous les messages précédents - le code s'exécute de manière asynchrone.

2. AJAX

AJAX (JavaScript et XML asynchrones) est un concept qui utilise le XMLHttpRequest (XHR) API pour faire des requêtes serveur et gérer les réponses.

Lorsque les navigateurs font des demandes au serveur sans utiliser XMLHttpRequest, le actualise la page et recharge son interface utilisateur. Lorsque le traitement des demandes et des réponses est géré par l’API XHR, et L'interface utilisateur reste inchangée.

Donc, fondamentalement, le but est de faire des demandes sans rechargement de page. Maintenant, où est le “asynchrone” dans ce? Le fait d’utiliser du code XHR (que nous verrons dans un instant) ne signifie pas qu’il s’agit d’AJAX, car l’API XHR peut fonctionne de manière synchrone et asynchrone.

XHR par défaut est réglé sur travailler de manière asynchrone; quand une fonction fait une requête en utilisant XHR, elle retourne sans attendre la réponse.

Si XHR est configuré pour être synchrone, alors la fonction attend jusqu'à ce que le la réponse est reçue et traitée avant de revenir.

Exemple de code 1

Cet exemple présente un XMLHttpRequest création d'objet. le ouvrir() méthode, valide l'URL de la requête et le envoyer() méthode envoie la demande.

 var xhr = new XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); 

Tout accès direct aux données de réponse après envoyer() sera en vain, car envoyer() n'attend pas jusqu'à ce que la demande soit complétée. N'oubliez pas que XMLHTTPRequest est défini pour fonctionner de manière asynchrone par défaut.

Exemple de code 2

le bonjour.txt Le fichier dans cet exemple est un simple fichier texte contenant le texte "hello". le réponse La propriété de XHR est invalide, car elle n'a pas sorti le texte 'hello'.

 var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // chaîne vide 

XHR implémente une micro-routine qui continue à vérifier la réponse en chaque milliseconde, et déclenche des événements complémentaires pour les différents états, une requête est transmise. Quand la réponse est chargée, un événement de chargement est déclenché par XHR, qui peut fournir une réponse valide.

 var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // écrit 'bonjour' dans le document 

La réponse à l'intérieur de l'événement de chargement sorties 'bonjour', le texte correct.

Il est préférable d’utiliser la méthode asynchrone, car elle ne bloque pas les autres scripts tant que la demande n’est pas terminée..

Si la réponse doit être traitée de manière synchrone, nous passons faux comme dernier argument de ouvrir, lequel signale l'API XHR en le disant doit être synchrone (par défaut le dernier argument de ouvrir est vrai, que vous n'avez pas besoin de spécifier explicitement).

 var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // écrit 'bonjour' dans le document 

Pourquoi apprendre tout ça?

Presque tous les débutants commettent des erreurs avec des concepts asynchrones tels que setTimeout () et AJAX, par exemple en supposant setTimeout () exécute le code après le délai ou en traitant la réponse directement dans une fonction faisant une demande AJAX.

Si vous savez comment le puzzle s’intègre, vous pouvez éviter une telle confusion. Vous savez que le temps de retard dans setTimeout () n'indique pas l'heure quand l'exécution du code commence, mais le temps quand la minuterie expire et un nouveau message est mis en file d'attente, ce qui ne sera traité que lorsque la pile d'appels sera libre de le faire.