Introduction à JavaScript Asynchrone
Qu'est-ce que la programmation asynchrone ?
La programmation asynchrone permet à votre code d'exécuter des opérations sans blocage. Contrairement à la programmation synchrone—où chaque opération attend que la précédente soit terminée avant de continuer—la programmation asynchrone autorise d'autres tâches à se poursuivre sans attendre la fin de la tâche précédente.
Cela est essentiel en développement web, où il peut être nécessaire d'effectuer des tâches longues, telles que la récupération de données depuis une API, l'attente d'une saisie utilisateur ou la gestion de minuteries.
Imaginons que nous développons un programme où 1 et 2 sont des requêtes serveur, et 3, 4 et 5 sont d'autres opérations comme la gestion des interactions utilisateur.
Dans le modèle synchrone, les tâches 1 et 2 bloquent l'exécution de 3, 4 et 5 jusqu'à leur achèvement. Par exemple, si un utilisateur publie un commentaire (1) puis tente d'ouvrir une barre latérale (3), l'interface se fige jusqu'à ce que le commentaire soit traité, ce qui entraîne des délais.
Dans le modèle asynchrone, les requêtes serveur (1 et 2) ne bloquent pas le programme. Pendant l'attente d'une réponse, le programme poursuit l'exécution des autres tâches (3, 4 et 5). Cela permet à l'utilisateur d'interagir immédiatement avec la barre latérale après avoir posté le commentaire, améliorant ainsi la réactivité.
Différences entre le comportement synchrone et asynchrone
Programmation synchrone
En programmation synchrone, les tâches sont exécutées l'une après l'autre. Chaque tâche doit se terminer avant que la suivante ne commence. Si une tâche prend beaucoup de temps (par exemple, un téléchargement de fichier volumineux), elle bloque toutes les tâches suivantes, ce qui peut rendre l'application non réactive.
123console.log('Task 1: Start'); for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task console.log('Task 2: After long task');
Dans cet exemple, la Tâche 2 ne s'exécutera qu'après la fin de la tâche longue (la boucle). Cela bloque l'exécution du code et peut figer le navigateur.
Programmation asynchrone
En programmation asynchrone, les tâches peuvent être lancées puis exécutées ultérieurement sans bloquer les autres instructions. Cela permet à d'autres tâches de continuer pendant l'attente de l'achèvement d'opérations longues (par exemple, la récupération de données). Ce mécanisme garantit que des tâches telles que les requêtes réseau ou les minuteries n'interrompent pas le déroulement des autres opérations de votre application.
index.html
index.css
index.js
Dans cet exemple, la Tâche 1 s'exécute immédiatement, la Tâche 3 s'exécute également immédiatement, et la Tâche 2 s'exécute après 2 secondes. Le comportement asynchrone permet au programme de continuer sans attendre la fin de la Tâche 2.
Exemples concrets d'opérations asynchrones
Récupération de données depuis une API
L'une des opérations asynchrones les plus courantes en JavaScript consiste à récupérer des données depuis un serveur distant à l'aide d'API. JavaScript demande des données à une API, mais le reste du code continue de s'exécuter au lieu d'attendre la réponse du serveur. Une fois les données disponibles, elles sont traitées à l'aide d'un callback ou d'une promesse.
index.html
index.js
- Code synchrone : Le paragraphe avec
id="syncMessage"
illustre que le code synchrone s'exécute immédiatement après le démarrage de la récupération asynchrone. Il montre que le programme ne s'interrompt pas en attendant les données de l'API ; - Récupération asynchrone : Une fois les données récupérées, le paragraphe avec
id="apiOutput"
est mis à jour, démontrant l'achèvement de la tâche asynchrone.
Minuteurs (setTimeout et setInterval)
Les fonctions setTimeout()
et setInterval()
de JavaScript sont couramment utilisées pour planifier l'exécution de tâches après un délai ou à intervalles réguliers. Ces fonctions ne bloquent pas l'exécution des autres codes. Les tâches qu'elles déclenchent s'exécutent après un délai ou un intervalle spécifié, tandis que le reste du code continue de s'exécuter.
index.html
index.js
- Code synchrone : Le paragraphe avec
id="syncMessage"
se met à jour immédiatement, montrant que la partie synchrone du code s'exécute sans attendre le minuteur ; - Minuteur asynchrone : Après 3 secondes, le rappel de
setTimeout()
s'exécute et met à jour le paragrapheid="timerOutput"
pour indiquer que le minuteur est terminé.
Gestion des événements d'entrée utilisateur
JavaScript attend de manière asynchrone que des événements se produisent sans bloquer l'exécution d'autres codes lors de la gestion des interactions utilisateur (telles que les clics, les soumissions de formulaires ou les frappes clavier). Les écouteurs d'événements sont non bloquants, ce qui signifie que le reste du programme peut continuer à s'exécuter pendant l'attente d'une entrée utilisateur.
index.html
index.js
- Code synchrone : Le paragraphe avec
id="syncMessage"
montre que le code synchrone s'exécute immédiatement après la mise en place de l'écouteur d'événement. Il n'attend pas que l'utilisateur clique sur le bouton ; - Gestion asynchrone des événements : L'écouteur d'événement du bouton est déclenché lorsque l'utilisateur clique, mettant à jour le paragraphe
id="eventOutput"
.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.22
Introduction à JavaScript Asynchrone
Glissez pour afficher le menu
Qu'est-ce que la programmation asynchrone ?
La programmation asynchrone permet à votre code d'exécuter des opérations sans blocage. Contrairement à la programmation synchrone—où chaque opération attend que la précédente soit terminée avant de continuer—la programmation asynchrone autorise d'autres tâches à se poursuivre sans attendre la fin de la tâche précédente.
Cela est essentiel en développement web, où il peut être nécessaire d'effectuer des tâches longues, telles que la récupération de données depuis une API, l'attente d'une saisie utilisateur ou la gestion de minuteries.
Imaginons que nous développons un programme où 1 et 2 sont des requêtes serveur, et 3, 4 et 5 sont d'autres opérations comme la gestion des interactions utilisateur.
Dans le modèle synchrone, les tâches 1 et 2 bloquent l'exécution de 3, 4 et 5 jusqu'à leur achèvement. Par exemple, si un utilisateur publie un commentaire (1) puis tente d'ouvrir une barre latérale (3), l'interface se fige jusqu'à ce que le commentaire soit traité, ce qui entraîne des délais.
Dans le modèle asynchrone, les requêtes serveur (1 et 2) ne bloquent pas le programme. Pendant l'attente d'une réponse, le programme poursuit l'exécution des autres tâches (3, 4 et 5). Cela permet à l'utilisateur d'interagir immédiatement avec la barre latérale après avoir posté le commentaire, améliorant ainsi la réactivité.
Différences entre le comportement synchrone et asynchrone
Programmation synchrone
En programmation synchrone, les tâches sont exécutées l'une après l'autre. Chaque tâche doit se terminer avant que la suivante ne commence. Si une tâche prend beaucoup de temps (par exemple, un téléchargement de fichier volumineux), elle bloque toutes les tâches suivantes, ce qui peut rendre l'application non réactive.
123console.log('Task 1: Start'); for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task console.log('Task 2: After long task');
Dans cet exemple, la Tâche 2 ne s'exécutera qu'après la fin de la tâche longue (la boucle). Cela bloque l'exécution du code et peut figer le navigateur.
Programmation asynchrone
En programmation asynchrone, les tâches peuvent être lancées puis exécutées ultérieurement sans bloquer les autres instructions. Cela permet à d'autres tâches de continuer pendant l'attente de l'achèvement d'opérations longues (par exemple, la récupération de données). Ce mécanisme garantit que des tâches telles que les requêtes réseau ou les minuteries n'interrompent pas le déroulement des autres opérations de votre application.
index.html
index.css
index.js
Dans cet exemple, la Tâche 1 s'exécute immédiatement, la Tâche 3 s'exécute également immédiatement, et la Tâche 2 s'exécute après 2 secondes. Le comportement asynchrone permet au programme de continuer sans attendre la fin de la Tâche 2.
Exemples concrets d'opérations asynchrones
Récupération de données depuis une API
L'une des opérations asynchrones les plus courantes en JavaScript consiste à récupérer des données depuis un serveur distant à l'aide d'API. JavaScript demande des données à une API, mais le reste du code continue de s'exécuter au lieu d'attendre la réponse du serveur. Une fois les données disponibles, elles sont traitées à l'aide d'un callback ou d'une promesse.
index.html
index.js
- Code synchrone : Le paragraphe avec
id="syncMessage"
illustre que le code synchrone s'exécute immédiatement après le démarrage de la récupération asynchrone. Il montre que le programme ne s'interrompt pas en attendant les données de l'API ; - Récupération asynchrone : Une fois les données récupérées, le paragraphe avec
id="apiOutput"
est mis à jour, démontrant l'achèvement de la tâche asynchrone.
Minuteurs (setTimeout et setInterval)
Les fonctions setTimeout()
et setInterval()
de JavaScript sont couramment utilisées pour planifier l'exécution de tâches après un délai ou à intervalles réguliers. Ces fonctions ne bloquent pas l'exécution des autres codes. Les tâches qu'elles déclenchent s'exécutent après un délai ou un intervalle spécifié, tandis que le reste du code continue de s'exécuter.
index.html
index.js
- Code synchrone : Le paragraphe avec
id="syncMessage"
se met à jour immédiatement, montrant que la partie synchrone du code s'exécute sans attendre le minuteur ; - Minuteur asynchrone : Après 3 secondes, le rappel de
setTimeout()
s'exécute et met à jour le paragrapheid="timerOutput"
pour indiquer que le minuteur est terminé.
Gestion des événements d'entrée utilisateur
JavaScript attend de manière asynchrone que des événements se produisent sans bloquer l'exécution d'autres codes lors de la gestion des interactions utilisateur (telles que les clics, les soumissions de formulaires ou les frappes clavier). Les écouteurs d'événements sont non bloquants, ce qui signifie que le reste du programme peut continuer à s'exécuter pendant l'attente d'une entrée utilisateur.
index.html
index.js
- Code synchrone : Le paragraphe avec
id="syncMessage"
montre que le code synchrone s'exécute immédiatement après la mise en place de l'écouteur d'événement. Il n'attend pas que l'utilisateur clique sur le bouton ; - Gestion asynchrone des événements : L'écouteur d'événement du bouton est déclenché lorsque l'utilisateur clique, mettant à jour le paragraphe
id="eventOutput"
.
Merci pour vos commentaires !