Fonctions asynchrones

Start

Les fonctions asynchrones en Javascript

PRESENTATION

javascript

Fonctionsettimeout()

Fonction setTimeout()

La fonction setTimeout() permet d'exécuter une fonction ou un bloc de code une seule fois après un certain délai, spécifié en millisecondes. Contrairement à setInterval(), elle n’est pas répétitive.

1.principe de settimeout()

Fonction setTimeout()

setTimeout() est une fonction asynchrone : le code continue de s'exécuter sans attendre la fin du délai. Cela signifie que tout le code situé après setTimeout() s’exécute immédiatement, sans attendre l'achèvement de la fonction programmée dans setTimeout().

2.Comportement asynchrone

"Début" s'affiche immédiatement. "Fin" s'affiche aussi immédiatement. "Après 3 secondes" s'affiche après un délai de 3 secondes.Cela illustre le fait que le code ne "bloque" pas en attendant que setTimeout() se termine.

Fonction setTimeout()

setTimeout() est utilisé quand on veut exécuter une tâche uniquement une fois après un délai donné. Par exemple, afficher une notification après 5 secondes, ou exécuter une action après une certaine attente.

3.Idéal pour les retards uniques

Fonction setTimeout()

Le délai minimum entre la programmation et l'exécution est, par défaut, de 4 millisecondes pour la plupart des navigateurs. Si on passe un délai de 0 millisecondes, cela ne signifie pas que la fonction s’exécutera instantanément, mais qu'elle sera programmée pour être exécutée après l’exécution de tout autre code en attente.

4.Référence de délai minImale

Le message "Code après setTimeout" s'affiche avant "Avec délai 0 millisecondes". C’est parce que le code asynchrone est mis dans une file d'attente pour être exécuté plus tard.

Fonction setTimeout()

Quand on utilise setTimeout(), il nous retourne un identifiant unique. Cet identifiant est utile si on veut annuler l’exécution programmée avant qu'elle ne se produise. Pour cela, on utilises la fonction clearTimeout() en lui passant cet identifiant.

5.Arrêter un setTimeout() avec clearTimeout()

Résultat : Le message "Ce message ne s'affichera pas" n'apparaît pas, car clearTimeout() a annulé setTimeout() avant l'expiration des 2 secondes.

Fonction setTimeout()

Quelques exemples où setTimeout() est fréquemment utilisé : Retarder l'exécution d'une action : comme des notifications ou des messages d’erreur. Simuler un temps d'attente : par exemple, pour simuler le délai de réponse d'un serveur. Chaîner des animations : pour exécuter des animations ou des changements de style de manière séquentielle.

6.utilisations courantes de settimeout()

Fonction setTimeout()

Il est possible de créer des boucles contrôlées avec setTimeout() pour imiter le comportement de setInterval(), mais avec plus de contrôle, notamment pour éviter les décalages d'exécution.

7.Combinaisons de settimeout() et setinterval()

Fonction setTimeout()

Quand setTimeout() est appelé, il est ajouté à la file d'attente des événements. Cela signifie qu'il ne s'exécutera qu'une fois que l’appel de code en cours (le stack) est terminé, même si le délai est dépassé.

8.Exécution différée en fonction de la file d'attente des événements

Ici, "Code principal" s’affiche toujours avant "setTimeout", car setTimeout est mis dans la file d’attente des événements et ne s'exécute que lorsque le code principal est terminé.

Fonction setTimeout()

setTimeout() peut générer des problèmes si on ne le maîtrise pas bien : Accumulation de tâches inutiles : Si on déclare plusieurs setTimeout() sans les annuler, on peut créer une fuite de mémoire. Exécution imprévisible : Si d'autres tâches sont en cours, setTimeout() peut s’exécuter avec du retard par rapport au délai spécifié.

9.Limites et précautions d'usage

setTimeout() exécute une tâche après un certain délai.Elle est asynchrone et n'interrompt pas le reste du programme.Elle renvoie un identifiant qui permet d’annuler l’exécution avec clearTimeout().Elle est idéale pour des actions uniques après un délai, comme des notifications ou des animations temporisées.Elle fait partie de la file d'attente des événements et ne s'exécute qu’une fois le code principal terminé.

En résumé

javascript

Fonctionsetinterval()

Fonction setInterval()

setInterval() permet d'exécuter une fonction de manière répétée à des intervalles de temps fixes, définis en millisecondes. Une fois que setInterval() est appelé, il exécute la fonction spécifiée après un premier délai et continue de le faire à des intervalles réguliers jusqu'à ce qu'il soit explicitement stoppé.

1.principe et Fonctionnements

Fonction setInterval()

2. Comportement asynchrone

setInterval() est asynchrone. Cela signifie qu'il ne bloque pas le fil d'exécution principal (thread principal). En effet, même si la fonction associée au setInterval() prend du temps à s'exécuter, le reste du programme continue à s'exécuter normalement sans être interrompu.

Dans cet exemple, le message "Cette ligne s'exécute immédiatement" s'affiche avant que la fonction du setInterval() ne commence son exécution. Cela démontre que le reste du code n'attend pas que setInterval() ait terminé ses cycles.

Fonction setInterval()

3. Délai minimal et ordonnancement

Le délai minimal entre deux exécutions d'un setInterval() est de 4 millisecondes dans les environnements modernes, même si on spécifie une valeur inférieure à 4ms. Cela est dû à une restriction de performance des navigateurs pour éviter une surcharge inutile de la CPU. De plus, les exécutions des intervalles ne sont pas strictement synchrones, surtout si la fonction qui s'exécute prend du temps.

Dans cet exemple, même si on spécifie 1ms, le navigateur pourra introduire un délai plus important, notamment si d'autres tâches importantes sont en cours.

Fonction setInterval()

4. Synchronisation des tâches longues

Si la fonction que l'on fait exécuter via setInterval() prend plus de temps à s'exécuter que l'intervalle de temps spécifié, alors la prochaine exécution ne commencera pas avant que la fonction en cours ne se termine. Cela peut créer des "débordements" dans le temps.

Ici, même si l'intervalle est de 1000ms (1 seconde), la fonction prend 3 secondes à s'exécuter. Le résultat est que la fonction ne s'exécutera pas exactement toutes les secondes, car elle attend la fin du traitement en cours. En conséquence, il y a un décalage.

Fonction setInterval()

5. Utilisation avancée : Référence de l'intervalle

Lorsque l'on utilise setInterval(), il nous retourne un identifiant unique. Cet identifiant permet de contrôler le cycle d'exécution de l'intervalle, notamment pour l'arrêter. C'est cet identifiant que nous passons à la fonction clearInterval() pour arrêter l'exécution.

Ici, clearInterval() utilise intervalId pour arrêter l'exécution du setInterval() après 10 secondes.

Fonction setInterval()

Si on oublies d'utiliser clearInterval() lorsque l'intervalle n'est plus nécessaire, on risques de créer ce qu'on appelle une fuite de mémoire. En effet, le navigateur continue d'exécuter la fonction à l'infini, même si elle n'est plus utile, ce qui peut nuire aux performances de l'application.Par exemple, imaginons que nous avons un intervalle qui continue de s'exécuter même après que l'utilisateur ait quitté une page ou fermé une fenêtre modale. Cela consomme inutilement des ressources..

6. Mauvais usage : risques de fuites de mémoire

Fonction setInterval()

setInterval() est souvent utilisé pour : -Mises à jour périodiques : par exemple, rafraîchir des données d'une API toutes les 5 minutes. -Compteurs : afficher un compte à rebours ou un compteur croissant à intervalles réguliers. -Animations simples : faire bouger un élément sur l'écran à chaque intervalle de temps. -Vérifications récurrentes : par exemple, vérifier l'état d'une tâche à intervalle régulier.

7. Utilisation courante : cas d'usage

Fonction setInterval()

8. Limites de setInterval() et alternatives

Même si setInterval() est utile, il peut ne pas être la solution optimale pour certaines tâches. Par exemple, pour des animations complexes, il est souvent recommandé d'utiliser requestAnimationFrame(), car celle-ci est mieux optimisée pour le rendu graphique et s'aligne avec le cycle de rafraîchissement de l'écran.

setInterval() permet d'exécuter des tâches à intervalles réguliers sans bloquer le reste du programme. C'est une fonction asynchrone qui s'exécute indépendamment du fil principal. Il est important de gérer l'arrêt des intervalles avec clearInterval() pour éviter les fuites de mémoire. Attention aux tâches longues qui peuvent entraîner des retards dans l'exécution des intervalles.

En résumé

Elle permet de programmer l'exécution répétée d'une fonction à des intervalles réguliers spécifiés en millisecondes, jusqu'à ce qu'on l’arrête avec clearInterval(). setInterval() est souvent utilisé pour des tâches récurrentes, telles que des animations, des compteurs, ou des vérifications périodiques d'une tâche.

Fonction setinterval()

VS

Fonction setTimeout()

Elle permet de programmer l'exécution d'une fonction ou d'un morceau de code après un certain délai en millisecondes. Elle n'exécute la fonction qu'une seule fois, sauf si elle est reprogrammée. setTimeout() est particulièrement utile pour les actions ponctuelles différées, comme afficher un message après un certain temps, ou simuler un délai de réponse.

Les deux fonctions sont asynchrones : une fonction Async, est une fonction qui s'execute quand un evenement arrive. pour les fonctions setInterval() et setTimeOut() , l'evenement c'est l'écoulement du temps, il existe plein d'autres fonction Async dont l'evenement n'est pas le temps, par exemple le addEventListner() est une fonction, plutôt une méthode qui ne s'exécute que si un evenement est enregistré (on click, etc)

settimeout() & setinterval()

conclusion

setTimeout() et setInterval() sont des fonctions essentielles en JavaScript pour gérer des actions différées et répétitives. Elles offrent une base puissante pour les animations, les interactions utilisateur, les requêtes périodiques et bien plus encore. Cependant, elles nécessitent un bon contrôle pour éviter les problèmes de performance et de gestion de mémoire. Bien que setTimeout() soit idéale pour des tâches ponctuelles, setInterval() est plus adaptée aux répétitions, à condition d’être utilisée avec précaution pour éviter les conflits d’exécution.

THANK you for watching