Planifier Script JavaScript: Exécution de scripts en JavaScript est une compétence essentielle pour tout développeur web. Les méthodes setTimeout
et setInterval
jouent un rôle crucial pour la gestion des tâches asynchrones en JavaScript. Comprendre comment utiliser ces fonctions vous permettra d’améliorer considérablement l’interactivité et la performance de vos applications web. Apprenons comment elles fonctionnent et comment les implémenter grâce à des exemples concrets de code.
Introduction à setTimeout et setInterval
setTimeout
et setInterval
sont des méthodes JavaScript utilisées pour exécuter du code après un délai spécifié ou de manière répétée respectivement. setTimeout
permet de planifier l’exécution d’une fonction une seule fois après une période donnée, tandis que setInterval
exécute une fonction répétitivement à un intervalle de temps spécifié.
Utiliser setTimeout
pour Différer l’Exécution
La fonction setTimeout
prend en entrée une fonction et un délai en millisecondes. Elle exécute la fonction après le délai spécifié :
function sayHello() {
console.log('Hello, world!');
}
// Exécuter la fonction après 2000 millisecondes (2 secondes)
setTimeout(sayHello, 2000);
Utiliser setInterval
pour Répéter une Tâche
setInterval
fonctionne de manière similaire à setTimeout
, mais elle exécute la fonction de manière répétée à intervalles réguliers :
function displayTime() {
console.log('Current time: ' + new Date().toLocaleTimeString());
}
// Exécuter la fonction toutes les 1000 millisecondes (1 seconde)
setInterval(displayTime, 1000);
Annuler les Tâches Planifiées avec clearTimeout
et clearInterval
Vous pouvez annuler une tâche planifiée à l’aide de clearTimeout
ou clearInterval
. Ces fonctions prennent en argument le timer renvoyé par setTimeout
ou setInterval
:
// Planifier une tâche
let timeoutId = setTimeout(function() {
console.log('This will not be logged');
}, 5000);
// Annuler la tâche planifiée
clearTimeout(timeoutId);
// Planifier une tâche répétée
let intervalId = setInterval(function() {
console.log('This will not be logged after clearInterval is called');
}, 1000);
// Annuler la tâche répétée
clearInterval(intervalId);
Gestion des Tâches Asynchrones Complexes avec setTimeout
et setInterval
Vous pouvez également utiliser ces fonctions pour gérer des tâches asynchrones plus complexes. Par exemple, pour créer une animation ou pour effectuer des requêtes périodiques à un serveur :
function startAnimation() {
let element = document.getElementById('movingElement');
let position = 0;
let increment = 1;
function move() {
position += increment;
element.style.left = position + 'px';
if (position >= 100 || position <= 0) {
increment = -increment; // Inverser le mouvement
}
timeoutId = setTimeout(move, 10);
}
move();
}
// Commencer l'animation
startAnimation();
Réaliser une Animation Simple avec setTimeout
Utilisons setTimeout
pour créer une animation simple qui déplace un élément sur la page :
document.addEventListener('DOMContentLoaded', function() {
const element = document.getElementById('animate');
let position = 0;
function animate() {
position += 1;
element.style.left = position + 'px';
if (position < 200) {
setTimeout(animate, 10);
}
}
animate();
});
Utiliser setInterval
pour Mettre à Jour une Interface de Façon Récurrente
Pour des mises à jour récurrentes de l'interface utilisateur, setInterval
est plus appropriate. Par exemple, pour afficher une horloge en temps réel :
document.addEventListener('DOMContentLoaded', function() {
const clock = document.getElementById('clock');
function updateClock() {
clock.textContent = new Date().toLocaleTimeString();
}
setInterval(updateClock, 1000); // Mise à jour chaque seconde
});
Exemples Avancés d'Utilisation de setTimeout
et setInterval
Pour vous permettre d'approfondir l'usage de setTimeout
et setInterval
, voici quelques exemples avancés d'utilisation.
Planifier des Requêtes HTTP Répétées
Vous pouvez utiliser setInterval
pour effectuer des requêtes HTTP répétées à un serveur afin de récupérer des données périodiquement :
function fetchData() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Data fetched:', data);
})
.catch(error => console.error('Error fetching data:', error));
}
// Récupérer les données toutes les 5 secondes
setInterval(fetchData, 5000);
Création d'un Diaporama avec setTimeout
Créer un diaporama d'images avec des délais entre chaque changement d'image :
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
function showNextImage() {
const imgElement = document.getElementById('slideshowImage');
imgElement.src = images[currentIndex];
currentIndex = (currentIndex + 1) % images.length;
setTimeout(showNextImage, 3000); // Changer d'image toutes les 3 secondes
}
document.addEventListener('DOMContentLoaded', function() {
showNextImage();
});
En poursuivant votre exploration des méthodes setTimeout
et setInterval
, vous pouvez également consulter des ressources externes pour élargir votre compréhension. Par exemple, le guide de MDN Web Docs sur setTimeout
et MDN Web Docs sur setInterval
offrent une couverture exhaustive des usages et des meilleurs pratiques. Vous pouvez également suivre des cours en ligne sur des plateformes comme Udemy pour un apprentissage structuré.
Intégration de setTimeout
et setInterval
avec d'autres Fonctions
L'utilisation efficace de setTimeout
et setInterval
n'est qu'une partie de l'histoire du travail asynchrone en JavaScript. Par exemple, vous pouvez combiner ces fonctions avec des fonctions intéressantes pour le DOM en JavaScript pour ajouter ou modifier des éléments du DOM de manière répétée, ou encore utiliser des callbacks pour effectuer des opérations après la fin des minuteries.