4.1 Fonction setTimeout
Les timers en JavaScript te permettent d'exécuter certaines actions après un délai spécifié. Les deux méthodes principales
pour travailler avec les timers sont setTimeout() et setInterval(). Elles sont utilisées pour exécuter
du code avec un délai ou à intervalles réguliers.
La méthode setTimeout() te permet d'exécuter une fonction une seule fois après un certain nombre de millisecondes.
C’est pratique pour l'exécution différée de code.
Syntaxe :
const timeoutID = setTimeout(callback, delay, ...args);
Où :
callback: fonction qui sera exécutéedelay: le délai en millisecondes avant l'exécution de la fonctionargs: arguments supplémentaires qui seront passés à la fonctioncallback
Exemple d'utilisation de setTimeout() :
// Fonction qui sera exécutée dans 2 secondes
function greet() {
console.log('Hello, world!');
}
// Définition du timer
const timeoutID = setTimeout(greet, 2000);
4.2 Annulation du timer setTimeout
Si tu as besoin d'annuler l'exécution d'une fonction planifiée via setTimeout(), tu peux utiliser la méthode clearTimeout() :
// Fonction qui sera exécutée dans 2 secondes
function greet() {
console.log('Hello, world!');
}
// Définition du timer
const timeoutID = setTimeout(greet, 2000);
// Annulation du timer
clearTimeout(timeoutID);
Exemple avec des arguments supplémentaires :
// Fonction qui sera exécutée dans 2 secondes avec des arguments
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Définition du timer en passant un argument
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Fonction setInterval
La méthode setInterval() te permet d'exécuter une fonction de manière répétée à des intervalles de temps spécifiés. C’est utile
pour l'exécution périodique de code.
Syntaxe :
const intervalID = setInterval(callback, delay, ...args);
Où :
callback: fonction qui sera exécutéedelay: intervalle en millisecondes entre les exécutions de la fonctionargs: arguments supplémentaires qui seront passés à la fonctioncallback
Exemple d'utilisation de setInterval :
// Fonction qui sera exécutée toutes les 2 secondes
function greet() {
console.log('Hello, world!');
}
// Définition de l'intervalle
const intervalID = setInterval(greet, 2000);
4.4 Annulation de l'intervalle setInterval
Si tu as besoin d'arrêter l'exécution répétée d'une fonction, tu peux utiliser la méthode clearInterval().
// Fonction qui sera exécutée toutes les 2 secondes
function greet() {
console.log('Hello, world!');
}
// Définition de l'intervalle
const intervalID = setInterval(greet, 2000);
// Annulation de l'intervalle après 10 secondes
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
Exemple avec des arguments supplémentaires :
// Fonction qui sera exécutée toutes les 2 secondes avec des arguments
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Définition de l'intervalle en passant un argument
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Exemples d'utilisation pratique
Exemple 1 : Mise à jour automatique de l'heure
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Mise à jour de l'heure chaque seconde
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Exemple 2 : Requête de données périodique
// Fonction pour simuler une requête de données
function fetchData() {
console.log('Fetching data...');
// Ici, tu peux effectuer une vraie requête vers le serveur
}
// Exécution de la requête de données toutes les 10 secondes
const intervalID = setInterval(fetchData, 10000);
// Arrêt des requêtes après 1 minute
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION