setTimeout et setInterval en JavaScript
En JavaScript, les fonctions de temporisation sont essentielles pour rendre les applications web dynamiques et interactives. setTimeout() et setInterval() sont clés pour gérer l'exécution du code. Ce guide couvre ces fonctions en détail, en fournissant des conseils pratiques et des exemples de code pour les utiliser efficacement.
Introduction aux fonctions de temporisation en JavaScript
Le JavaScript, essentiel au développement web, dispose de fonctions de temporisation qui exécutent du code à des moments précis. Parmi celles-ci, setTimeout et setInterval sont particulièrement utiles pour planifier des tâches.
La fonction setTimeout()
La fonction setTimeout() vous permet d'exécuter un morceau de code une seule fois après un délai spécifié. Elle accepte deux paramètres : une fonction à exécuter et un délai en millisecondes avant l'exécution.
Syntaxe :
setTimeout(function, delay);Exemple :
La fonction setInterval()
À l'inverse, setInterval() exécute une fonction de manière répétée à un intervalle spécifié. Comme setTimeout(), elle accepte une fonction et un délai en millisecondes. Notez que si un rappel (callback) prend plus de temps que l'intervalle, les exécutions peuvent se chevaucher ou dériver. Pour une temporisation précise, envisagez plutôt d'utiliser setTimeout() de manière récursive.
Syntaxe :
setInterval(function, interval);Exemple :
Annulation de l'exécution planifiée
JavaScript fournit également des méthodes pour annuler l'exécution planifiée par setTimeout() et setInterval(), à savoir clearTimeout() et clearInterval() respectivement.
Arrêter setTimeout() :
Pour annuler un timeout, stockez l'identifiant retourné par setTimeout() et passez-le à clearTimeout().
Exemple :
Arrêter setInterval() :
De même, pour arrêter un intervalle, enregistrez l'identifiant de setInterval() et utilisez-le avec clearInterval().
Exemple :
Applications pratiques et conseils
Comprendre et utiliser setTimeout() et setInterval() va au-delà de la syntaxe de base. Voici quelques conseils et bonnes pratiques avancés pour une utilisation efficace :
- Débouncing avec
setTimeout(): Le débouncing est une technique permettant de limiter la fréquence d'exécution d'une fonction. Cela est particulièrement utile dans des scénarios comme les champs de recherche, où vous ne souhaitez peut-être pas déclencher un appel API à chaque frappe de touche.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Debounced Input Example</title>
<script>
// Debounce function to limit the rate at which a function is executed
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Function to be debounced
function fetchData(input) {
alert(`API call with input: ${input}`); // Placeholder for an API call
}
// Create a debounced version of fetchData
const debouncedFetchData = debounce(fetchData, 300);
// Add the debounced function to an event listener
function setup() {
document.getElementById('searchInput').addEventListener('input', (event) => {
debouncedFetchData(event.target.value);
});
}
// Ensure setup is called once the document is fully loaded
document.addEventListener('DOMContentLoaded', setup);
</script>
</head>
<body>
<h3>Type in the input field:</h3>
<input type="text" id="searchInput" placeholder="Start typing..." />
</body>
</html>Result
- Throttling avec
setTimeout(): Le throttling garantit qu'une fonction est exécutée au plus une fois tous les millisecondes spécifiés. Cela peut être utile pour gérer les événements de défilement sans surcharger la boucle d'événements du navigateur. Notez que l'exemple ci-dessous utilise une approche "leading-edge" (exécution immédiate au premier appel), qui peut ne pas convenir à tous les cas d'usage par rapport aux alternatives "trailing-edge".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Throttled Scroll Event</title>
<style>
/* Simple styling for demonstration */
body, html {
height: 200%; /* Make the page scrollable */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#log {
position: fixed;
top: 0;
left: 0;
background: white;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div id="log">Scroll to see the effect...</div>
<script>
// Throttle function using setTimeout
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, Math.max(0, limit - (Date.now() - lastRan)));
}
}
}
// Function to be throttled
function handleScroll() {
const log = document.getElementById('log');
log.textContent = `Scroll event triggered at: ${new Date().toLocaleTimeString()}`;
}
// Add event listener for scroll
window.addEventListener('scroll', throttle(handleScroll, 1000));
</script>
</body>
</html>Result
- Retards de la boucle d'événements : Notez que les délais de
setTimeout()etsetInterval()sont des minimums. L'exécution réelle peut être retardée si la boucle d'événements JavaScript est occupée ou si le navigateur met en veille les onglets en arrière-plan. - Limites de délai maximal : La spécification JavaScript limite les délais supérieurs à
2147483647(2^31 - 1) millisecondes à1. Les délais dépassant cette plage n'attendront pas plus longtemps ; ils s'exécuteront presque immédiatement. - Utilisation dans les applications web : Ces fonctions de temporisation peuvent améliorer l'expérience utilisateur en ajoutant des animations, en gérant des actions basées sur le temps (comme la sauvegarde automatique des champs de formulaire) et en gérant plus efficacement les opérations asynchrones.
Conclusion
Maîtriser setTimeout() et setInterval() est crucial pour tout développeur JavaScript. Ces fonctions sont essentielles pour planifier des tâches, contribuant à rendre les applications web dynamiques et réactives. En appliquant les pratiques et exemples de ce guide, les développeurs peuvent gérer efficacement les tâches dépendantes du temps, améliorant ainsi à la fois les performances de l'application et l'expérience utilisateur.
Pratique
Parmi les affirmations suivantes, lesquelles sont vraies concernant l'utilisation de `setTimeout()` et `setInterval()` en JavaScript ?