Comment faire un "sleep" en JavaScript (pour faire une pause)
03/11/2024 • Melvynx
03/11/2024 • Melvynx
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.
setTimeout
est la fonction de base en JavaScript pour exécuter du code après un délai spécifié. Elle prend deux arguments :
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.
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.
Tu te demandes peut-être pourquoi on aurait besoin de mettre en pause notre code. Voici quelques cas d'utilisation :
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.).
Bien que sleep
soit utile, il faut l'utiliser avec précaution :
sleep
trop long peut rendre ton application non réactive.async/await
pour ne pas bloquer le thread principal.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 !