Retour • 03/11/2024

Comment faire un "sleep" en JavaScript (pour faire une pause)

Écris par Melvyn Malherbe le 03/11/2024

Tu as déjà eu besoin de mettre en pause ton code JavaScript pendant quelques secondes ? C'est là que la fonction sleep entre en jeu.

Voici comment l'implémenter rapidement :

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Puis tu peux l'utiliser de cette manière :

async function exemple() {
  console.log("Début");
  await sleep(2000); // Pause de 2 secondes
  console.log("Fin");
}

exemple();

Simple, non ? Maintenant, décomposons ce code et voyons pourquoi il fonctionne ainsi.

Pourquoi utiliser setTimeout ?

setTimeout est la fonction de base en JavaScript pour exécuter du code après un délai spécifié. Elle prend deux arguments :

1. Une fonction à exécuter
2. Un délai en millisecondes

setTimeout(() => {
  console.log("Ceci s'affiche après 1 seconde");
}, 1000);

Cependant, setTimeout seul ne suffit pas pour créer un véritable "sleep". C'est là que les Promises entrent en jeu.

Pourquoi utiliser des promises pour sleep ?

Les Promises en JavaScript sont des objets représentant l'achèvement (ou l'échec) éventuel d'une opération asynchrone. Elles permettent de gérer le code asynchrone de manière plus élégante.

Voici comment fonctionne new Promise :

new Promise((resolve, reject) => {
  // Code asynchrone ici
  // Appeler resolve() quand c'est terminé avec succès
  // Ou reject() en cas d'erreur
});

Dans notre fonction sleep, on utilise new Promise pour encapsuler setTimeout :

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Cette structure permet d'utiliser await avec notre fonction sleep, ce qui rend le code plus lisible et plus facile à gérer.

Pourquoi avons-nous besoin de sleep en JavaScript ?

Tu te demandes peut-être pourquoi on aurait besoin de mettre en pause notre code. Voici quelques cas d'utilisation :

1. Tests : Pour simuler des délais réseau ou des opérations longues.
2. Animations : Pour créer des séquences d'animations avec des délais précis.
3. Rate limiting : Pour espacer les appels API et éviter de surcharger un serveur.
4. Débogage : Pour ralentir l'exécution et mieux comprendre le flux du programme.

Voici un exemple concret d'utilisation de sleep pour espacer des appels API :

async function fetchUserData(users) {
  for (const user of users) {
    const data = await fetchAPI(`/user/${user.id}`);
    console.log(data);
    await sleep(1000); // Attendre 1 seconde entre chaque appel
  }
}

(Si tu veux en savoir plus sur le fetch en JavaScript c'est par ici.).

Optimisation et bonnes pratiques

Bien que sleep soit utile, il faut l'utiliser avec précaution :

1. Évite les longues pauses : Un sleep trop long peut rendre ton application non réactive.
2. Utilise-le de manière asynchrone : Toujours avec async/await pour ne pas bloquer le thread principal.
3. Considère les alternatives : Pour des cas plus complexes, regarde du côté des observables (comme RxJS) ou des générateurs.

Conclusion

Le sleep en JavaScript est un outil puissant quand il est utilisé à bon escient. En combinant setTimeout et les Promises, tu peux créer des pauses contrôlées dans ton code asynchrone, ouvrant la porte à des applications plus robustes et mieux gérées.

Si tu veux approfondir tes connaissances en JavaScript et maîtriser l'asynchrone, ma formation gratuite BeginWeb est faite pour toi :

N'oublie pas, la clé d'un bon code JavaScript est de savoir quand et comment utiliser ces outils. Alors expérimente, teste différentes approches, et trouve ce qui fonctionne le mieux pour tes projets !