javascript 2
JAVASCRIPT L'asynchrone
Sommaire
1 - Introduction
4 - "async" et "await"
2 - Les Callbacks
5 - Les Web Workers
3 - Les Promesses
javascript 1
1 - Introduction
1- introduction
En JavaScript, la programmation synchrone signifie que les opérations sont exécutées l'une après l'autre. Toutefois, dans certaines situations, comme lors de la récupération de données depuis une API, attendre la fin d'une opération bloquante (ex. : une requête réseau) pourrait rendre l'application lente et non réactive. C’est ici que la programmation asynchrone intervient. Elle permet d’exécuter du code sans bloquer le fil d’exécution principal, ce qui est essentiel pour garder une interface utilisateur fluide et performante. Exemple de problème synchrone :
javascript 1
2 - Les Callbacks
2- Les Callbacks
Les callbacks étaient historiquement la première approche utilisée pour la programmation asynchrone. Un callback est une fonction passée en argument à une autre fonction, qui sera exécutée lorsque la tâche asynchrone sera terminée. Exemple avec setTimeout :
javascript 1
3 - Les Promesses
3- Les Promesses
Les promesses offrent une manière plus élégante de gérer le code asynchrone, en représentant une opération qui est soit résolue (terminée avec succès) soit rejetée (terminée avec une erreur). Les promesses simplifient la gestion de plusieurs opérations asynchrones. Exemple avec une Promesse :
javascript 1
4 - "async" et "await"
4- "async" et "await"
Avec async et await, le code asynchrone devient plus lisible et ressemble à du code synchrone. Une fonction déclarée avec le mot-clé async retourne automatiquement une promesse. Le mot-clé await permet d'attendre que la promesse soit résolue. Exemple avec async/await :
javascript 1
5 - Les Web Workers
5- Les Web Workers
Les Web Workers permettent d'exécuter du code JavaScript dans un fil d'exécution séparé, sans bloquer le thread principal, ce qui est utile pour les tâches longues ou complexes comme les calculs intensifs. Exemple d’utilisation de Web Worker :
- Créer un fichier de worker nommé worker.js :
- Utiliser le Worker dans le code principal :
Avec les Workers, le calcul intensif est délégué à un thread séparé, permettant au fil principal de rester réactif.
L'explication sur l'asynchrone JavaScript est maintenant terminée ! Rendez-vous dans le prochain cours pour en savoir plus sur les modules ! Si vous souhaitez partager vos reflexions ou si vous avez des questions, n'oubliez pas d'utiliser les forums !
En choisissant un fond foncé, nous visons à dissuader l'impression et à promouvoir une utilisation 100% numérique. Cette approche encourage une utilisation plus responsable et durable des technologies numériques, contribuant ainsi à la protection de notre environnement.
En savoir +
Dans cet exemple, l'opération lente bloque le programme, retardant l'affichage du message de fin.
Afin d'accéder à un élément d'une page web, il est nécessaire d'attendre que celui-ci ait été construit dans le document. Il existe plusieurs solutions pour cela :
- charger le script en fin de document
- utiliser l'événement "load" sur l'objet window
- utiliser l'événement "DOMContentLoaded" sur l'objet document
- utiliser le mot-clé ES6 defer dans la balise script
Ici, promesse.then() permet de traiter la réussite de l'opération asynchrone, tandis que catch() permet de gérer les erreurs éventuelles. Mais nous utiliserons ces promesses plus facilement avec l'API fetch, qui sera vu dans le module ajax.
Ici, setTimeout exécute le callback après 3 secondes sans bloquer le reste du programme. Ce type de code reste simple pour des opérations courtes, mais peut devenir difficile à maintenir lorsqu'il y a de multiples opérations asynchrones imbriquées, un phénomène souvent appelé "callback hell".
Nous avons opté pour des supports de cours sur fond foncé pour plusieurs raisons, voici lesquelles et pourquoi : Écologie et économie de ressourcesRéduction de l'utilisation d'encre : Les écrans OLED, présents dans de nombreux smartphones, tablettes et ordinateurs portables modernes, éteignent les pixels pour afficher du noir. Un fond foncé consomme moins d'énergie et n'utilise pas d'encre numérique, contrairement aux écrans LCD qui nécessitent un rétroéclairage constant, quelle que soit la couleur affichée.Prévention de l'impression inutile : En choisissant un fond foncé, nous encourageons l'utilisation numérique de ces supports. L'impression de pages à fond foncé consomme non seulement beaucoup d'encre, mais elle est aussi coûteuse et moins respectueuse de l'environnement. En insistant sur le fait que ces supports ne sont pas destinés à être imprimés, nous contribuons à la préservation des ressources naturelles.Numérique Responsable Optimisation de la lecture écranLes fonds foncés peuvent être plus confortables pour les yeux lorsqu'ils sont lus sur des écrans, surtout dans des environnements peu éclairés. Cela réduit la fatigue oculaire et encourage une lecture prolongée sans inconfort. Réduction de la consommation énergétique : Pour les appareils équipés d'écrans OLED, les fonds foncés consomment moins d'énergie. Cela aide non seulement à prolonger la durée de vie de la batterie des appareils mobiles mais aussi à réduire l'empreinte énergétique globale de l'utilisation numérique. Conscience écologique : En choisissant de ne pas imprimer ces supports de cours, nous faisons un pas vers une utilisation plus responsable des ressources naturelles. Économie de papier et réduction des déchets : Moins d'impression signifie moins de papier utilisé, ce qui contribue directement à la réduction de la déforestation et à la conservation de la biodiversité. Cela signifie également moins de déchets à gérer.
Afin d'accéder à un élément d'une page web, il est nécessaire d'attendre que celui-ci ait été construit dans le document. Il existe plusieurs solutions pour cela :
- charger le script en fin de document
- utiliser l'événement "load" sur l'objet window
- utiliser l'événement "DOMContentLoaded" sur l'objet document
- utiliser le mot-clé ES6 defer dans la balise script
Dans cet exemple, await attend que la promesse soit résolue avant de passer à la ligne suivante. Cela rend le code plus facile à lire qu’avec les promesses enchaînées avec then().
JS2-05-l_asynchrone
CEFii
Created on September 11, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Decisions and Behaviors in the Workplace
View
Tangram Game
View
Process Flow: Corporate Recruitment
View
Weekly Corporate Challenge
View
Wellbeing and Healthy Routines
View
Match the Verbs in Spanish: Present and Past
View
Planets Sorting Game
Explore all templates
Transcript
javascript 2
JAVASCRIPT L'asynchrone
Sommaire
1 - Introduction
4 - "async" et "await"
2 - Les Callbacks
5 - Les Web Workers
3 - Les Promesses
javascript 1
1 - Introduction
1- introduction
En JavaScript, la programmation synchrone signifie que les opérations sont exécutées l'une après l'autre. Toutefois, dans certaines situations, comme lors de la récupération de données depuis une API, attendre la fin d'une opération bloquante (ex. : une requête réseau) pourrait rendre l'application lente et non réactive. C’est ici que la programmation asynchrone intervient. Elle permet d’exécuter du code sans bloquer le fil d’exécution principal, ce qui est essentiel pour garder une interface utilisateur fluide et performante. Exemple de problème synchrone :
javascript 1
2 - Les Callbacks
2- Les Callbacks
Les callbacks étaient historiquement la première approche utilisée pour la programmation asynchrone. Un callback est une fonction passée en argument à une autre fonction, qui sera exécutée lorsque la tâche asynchrone sera terminée. Exemple avec setTimeout :
javascript 1
3 - Les Promesses
3- Les Promesses
Les promesses offrent une manière plus élégante de gérer le code asynchrone, en représentant une opération qui est soit résolue (terminée avec succès) soit rejetée (terminée avec une erreur). Les promesses simplifient la gestion de plusieurs opérations asynchrones. Exemple avec une Promesse :
javascript 1
4 - "async" et "await"
4- "async" et "await"
Avec async et await, le code asynchrone devient plus lisible et ressemble à du code synchrone. Une fonction déclarée avec le mot-clé async retourne automatiquement une promesse. Le mot-clé await permet d'attendre que la promesse soit résolue. Exemple avec async/await :
javascript 1
5 - Les Web Workers
5- Les Web Workers
Les Web Workers permettent d'exécuter du code JavaScript dans un fil d'exécution séparé, sans bloquer le thread principal, ce qui est utile pour les tâches longues ou complexes comme les calculs intensifs. Exemple d’utilisation de Web Worker :
Avec les Workers, le calcul intensif est délégué à un thread séparé, permettant au fil principal de rester réactif.
L'explication sur l'asynchrone JavaScript est maintenant terminée ! Rendez-vous dans le prochain cours pour en savoir plus sur les modules ! Si vous souhaitez partager vos reflexions ou si vous avez des questions, n'oubliez pas d'utiliser les forums !
En choisissant un fond foncé, nous visons à dissuader l'impression et à promouvoir une utilisation 100% numérique. Cette approche encourage une utilisation plus responsable et durable des technologies numériques, contribuant ainsi à la protection de notre environnement.
En savoir +
Dans cet exemple, l'opération lente bloque le programme, retardant l'affichage du message de fin.
Afin d'accéder à un élément d'une page web, il est nécessaire d'attendre que celui-ci ait été construit dans le document. Il existe plusieurs solutions pour cela :
Ici, promesse.then() permet de traiter la réussite de l'opération asynchrone, tandis que catch() permet de gérer les erreurs éventuelles. Mais nous utiliserons ces promesses plus facilement avec l'API fetch, qui sera vu dans le module ajax.
Ici, setTimeout exécute le callback après 3 secondes sans bloquer le reste du programme. Ce type de code reste simple pour des opérations courtes, mais peut devenir difficile à maintenir lorsqu'il y a de multiples opérations asynchrones imbriquées, un phénomène souvent appelé "callback hell".
Nous avons opté pour des supports de cours sur fond foncé pour plusieurs raisons, voici lesquelles et pourquoi : Écologie et économie de ressourcesRéduction de l'utilisation d'encre : Les écrans OLED, présents dans de nombreux smartphones, tablettes et ordinateurs portables modernes, éteignent les pixels pour afficher du noir. Un fond foncé consomme moins d'énergie et n'utilise pas d'encre numérique, contrairement aux écrans LCD qui nécessitent un rétroéclairage constant, quelle que soit la couleur affichée.Prévention de l'impression inutile : En choisissant un fond foncé, nous encourageons l'utilisation numérique de ces supports. L'impression de pages à fond foncé consomme non seulement beaucoup d'encre, mais elle est aussi coûteuse et moins respectueuse de l'environnement. En insistant sur le fait que ces supports ne sont pas destinés à être imprimés, nous contribuons à la préservation des ressources naturelles.Numérique Responsable Optimisation de la lecture écranLes fonds foncés peuvent être plus confortables pour les yeux lorsqu'ils sont lus sur des écrans, surtout dans des environnements peu éclairés. Cela réduit la fatigue oculaire et encourage une lecture prolongée sans inconfort. Réduction de la consommation énergétique : Pour les appareils équipés d'écrans OLED, les fonds foncés consomment moins d'énergie. Cela aide non seulement à prolonger la durée de vie de la batterie des appareils mobiles mais aussi à réduire l'empreinte énergétique globale de l'utilisation numérique. Conscience écologique : En choisissant de ne pas imprimer ces supports de cours, nous faisons un pas vers une utilisation plus responsable des ressources naturelles. Économie de papier et réduction des déchets : Moins d'impression signifie moins de papier utilisé, ce qui contribue directement à la réduction de la déforestation et à la conservation de la biodiversité. Cela signifie également moins de déchets à gérer.
Afin d'accéder à un élément d'une page web, il est nécessaire d'attendre que celui-ci ait été construit dans le document. Il existe plusieurs solutions pour cela :
Dans cet exemple, await attend que la promesse soit résolue avant de passer à la ligne suivante. Cela rend le code plus facile à lire qu’avec les promesses enchaînées avec then().