Tutoriel JavaScript setTimeout - Comment utiliser l'équivalent JS de sleep, wait, delay et pause

JavaScript est le langage du Web. Et ce n'est pas la même chose depuis la sortie de ES5. De plus en plus d'idées et de fonctionnalités sont portées à partir de différents langages et intégrées dans JavaScript.

L'une de ces fonctionnalités est Promises, qui est probablement la fonctionnalité la plus largement utilisée dans JavaScript après la sortie d'ES5.

Mais l'une des choses qui manque à JavaScript est un moyen de «suspendre» l'exécution pendant un moment et de la reprendre plus tard. Dans cet article, je vais discuter de la façon dont vous pouvez y parvenir et de ce que signifie réellement «mettre en pause» ou «dormir» en JavaScript.

Spoiler: JavaScript n'est jamais vraiment "pause".

TL; DR

Voici le code de copier-coller qui fait le travail:

/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) }

Mais que se passe-t-il vraiment ici?

setTimeout et fausses promesses

Voyons un exemple rapide utilisant l'extrait de code ci-dessus (nous discuterons de ce qui s'y passe plus tard):

async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() }

Cette fonction performBatchActions, lorsqu'elle est appelée, exécute simplement la performAPIRequestfonction, attend environ 5 secondes , puis appelle à nouveau la même fonction. Notez comment j'ai écrit environ 5 secondes , et non 5 secondes.

Une note forte à mettre là-bas: le code ci-dessus ne garantit pas un sommeil parfait. Cela signifie que si vous spécifiez une durée, disons, 1 seconde, JavaScript ne garantit pas qu'il commencera à exécuter le code après la mise en veille exactement après 1 seconde.

Pourquoi pas? tu peux demander. Malheureusement, c'est parce que les minuteries fonctionnent en JavaScript, et en général, les boucles d'événements. Cependant, JavaScript garantit absolument que le morceau de code après la mise en veille ne s'exécutera jamais avant l'heure spécifiée.

Nous n'avons donc pas vraiment de situation indéterminée complète, juste partielle. Et dans la plupart des cas, c'est dans une marge de quelques millisecondes seulement.

JavaScript est un thread

Un seul thread signifie qu'un processus JavaScript ne peut pas vraiment se passer du tout. Il doit tout faire - des écouteurs d'événements aux rappels HTTP, sur le même thread principal. Et lorsqu'une chose est en cours d'exécution, une autre ne peut pas s'exécuter.

Prenons une page Web dans laquelle vous avez plusieurs boutons et vous exécutez le code ci-dessus pour simuler un sommeil pendant, disons, 10 secondes. À quoi vous attendez-vous?

Rien du tout. Votre page Web fonctionnera très bien, vos boutons seront réactifs, et une fois les 10 secondes de veille terminées, le code à côté s'exécutera. Il est donc évident que JavaScript ne bloque pas vraiment tout le fil principal, car si c'était le cas, votre page Web se serait gelée et les boutons seraient devenus non cliquables.

Alors, comment JavaScript a-t-il réellement mis en pause un seul thread, sans jamais vraiment le mettre en pause?

Rencontrez la boucle d'événement

Contrairement à d'autres langages, JavaScript ne se contente pas d'exécuter du code de manière linéaire de haut en bas. C'est un langage événementiel asynchrone avec des tonnes de magie sous la forme de la boucle d'événements.

Une boucle d'événements divise votre code en événements synchrones et certains, comme des minuteries et des requêtes HTTP. Précisément, il existe deux files d'attente: une file d'attente de tâches et une file d'attente de microtâche.

Chaque fois que vous exécutez JS et qu'il y a une chose asynchrone (comme un événement de clic de souris ou une promesse), JavaScript le jette dans la file d'attente des tâches (ou file d'attente des microtaches) et continue de s'exécuter. Lorsqu'il effectue un "tick unique", il vérifie si les files d'attente de tâches et la file d'attente de microtâche ont du travail pour cela. Si oui, alors il exécutera le rappel / effectuera une action.

Je recommanderais vraiment à toute personne intéressée par le fonctionnement détaillé des boucles d'événements de regarder cette vidéo:

Conclusion

Vous êtes venu ici pour une simple instruction sur le sommeil en JavaScript, et vous avez fini par apprendre l'un des éléments fondamentaux de JavaScript - les boucles d'événements! Incroyable, non?

Eh bien, si vous avez aimé l'article, consultez codedamn - une plate-forme que j'ai créée pour les développeurs et les apprenants comme vous. Aussi, connectons-nous sur les réseaux sociaux - Twitter et Instagram. À bientôt!

Paix