OUJOOD.COM
Définition et utilisation de la méthode setTimeout()
JavaScript cours tutorialLa méthode setTimeout() permet d'exécuter une fonction ou d'évaluer une expression après un délai spécifié en millisecondes (1 seconde = 1000 ms). Cette méthode est essentielle pour gérer les actions différées dans vos applications JavaScript.
Important : La fonction ne s'exécute qu'une seule fois. Si vous avez besoin d'une exécution répétée à intervalles réguliers, utilisez plutôt la méthode setInterval().
Astuce : Utilisez la méthode clearTimeout() pour annuler l'exécution programmée de la fonction avant qu'elle ne soit déclenchée.
Exemple : Afficher un message d'alerte après 3 secondes
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple méthode setTimeout()</title>
</head>
<body>
<p>Cliquez sur le bouton pour voir le résultat</p>
<button onclick="maFonction()">ENVOYER</button>
<script>
function maFonction() {
setTimeout(function() {
alert("Hello");
}, 3000);
}
</script>
</body>
</html>
Support des navigateurs
La méthode setTimeout() est prise en charge par tous les navigateurs modernes, y compris Internet Explorer 5.5 et versions ultérieures.
Syntaxe
setTimeout(fonction, millisecondes, param1, param2, ...)
Paramètres de la méthode
| Paramètre | Description |
|---|---|
| fonction | Obligatoire. La fonction qui sera exécutée après le délai spécifié |
| millisecondes | Obligatoire. Le délai en millisecondes à attendre avant l'exécution de la fonction (1000 ms = 1 seconde) |
| param1, param2, ... | Optionnel. Paramètres supplémentaires à passer à la fonction lors de son exécution |
Valeur de retour
| Un identifiant numérique (ID) du timer créé. Cette valeur doit être conservée si vous souhaitez annuler l'exécution avec la méthode clearTimeout(). |
Définition et utilisation de la méthode clearTimeout()
La méthode clearTimeout() permet d'annuler un timer défini avec la méthode setTimeout(). Elle empêche l'exécution de la fonction programmée tant que celle-ci n'a pas encore été déclenchée.
L'identifiant (ID) retourné par setTimeout() doit être passé en paramètre à la méthode clearTimeout() pour annuler le timer correspondant.
Remarque importante : Pour pouvoir utiliser clearTimeout(), vous devez stocker l'ID retourné par setTimeout() dans une variable :
var monTimer = setTimeout(maFonction, 5000);
Vous pourrez ensuite annuler l'exécution programmée en appelant clearTimeout() avec cet ID, à condition que la fonction n'ait pas encore été exécutée.
Exemple : Utiliser clearTimeout() pour empêcher l'exécution d'une fonction
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple clearTimeout() - Annuler un timer</title>
</head>
<body>
<p>En cliquant sur le bouton "Marche", une boîte d'alerte
s'affichera après un délai de 3 secondes.</p>
<p>Si vous cliquez sur le bouton "Stop" avant l'écoulement
des 3 secondes, vous empêcherez l'exécution de la fonction.</p>
<button onclick="maFonction()">Marche</button>
<button onclick="maStopFonction()">Stop</button>
<script>
var myVar;
function maFonction() {
myVar = setTimeout(function() {
alert("Bonjour");
}, 3000);
}
function maStopFonction() {
clearTimeout(myVar);
}
</script>
</body>
</html>
Support des navigateurs
La méthode clearTimeout() est supportée par tous les navigateurs modernes.
Syntaxe
clearTimeout(id_du_timer)
Paramètre
| Paramètre | Description |
|---|---|
| id_du_timer | Obligatoire. L'identifiant du timer retourné par la méthode setTimeout() que vous souhaitez annuler |
Exemples pratiques d'utilisation
Exemple : Afficher un texte synchronisé
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple setTimeout() - Texte synchronisé</title>
</head>
<body>
<p>Cliquez sur le bouton ci-dessous. Le champ de saisie
affichera le temps écoulé à 2, 4 et 6 secondes.</p>
<button onclick="afficheTexte()">Démarrer</button>
<input type="text" id="texte" size="15">
<script>
function afficheTexte() {
var x = document.getElementById("texte");
setTimeout(function() { x.value = "2 secondes"; }, 2000);
setTimeout(function() { x.value = "4 secondes"; }, 4000);
setTimeout(function() { x.value = "6 secondes"; }, 6000);
}
</script>
</body>
</html>
Exemple : Ouvrir une nouvelle fenêtre et la fermer automatiquement
Cet exemple démontre comment ouvrir automatiquement une fenêtre popup et la fermer après un délai défini. Cette technique est utile pour afficher des notifications temporaires sans obliger l'utilisateur à fermer manuellement la fenêtre.
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple setTimeout() - Fenêtre popup temporaire</title>
</head>
<body>
<p>Cliquez sur le bouton pour ouvrir une nouvelle fenêtre
qui se fermera automatiquement après 4 secondes.</p>
<button onclick="ouvreFenetre()">Ouvrir</button>
<script>
function ouvreFenetre() {
var myWindow = window.open("", "myWindow", "width=400,height=150");
myWindow.document.write("<p><b>Cette fenêtre sera fermée " +
"automatiquement dans 4 secondes (4000 millisecondes).</b></p>");
setTimeout(function() { myWindow.close(); }, 4000);
}
</script>
</body>
</html>
Exemple : Créer un compteur avec boutons de contrôle
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple setTimeout() - Compteur interactif</title>
</head>
<body>
<button onclick="startCount()">Démarrer le compteur</button>
<input type="text" id="txt" size="10">
<button onclick="stopCount()">Arrêter le compteur</button>
<p>
Cliquez sur « Démarrer le compteur » pour lancer l'incrémentation.
Le champ affichera le décompte en partant de 0. Cliquez sur
« Arrêter le compteur » pour stopper le compte. Vous pouvez relancer
le compteur en cliquant à nouveau sur « Démarrer le compteur ».
</p>
<script>
var compte = 0;
var param;
var timer_actif = 0;
function compteur() {
document.getElementById("txt").value = compte;
compte = compte + 1;
param = setTimeout(function() { compteur(); }, 1000);
}
function startCount() {
if (!timer_actif) {
timer_actif = 1;
compteur();
}
}
function stopCount() {
clearTimeout(param);
timer_actif = 0;
}
</script>
</body>
</html>
Exemple : Redirection automatique avec compte à rebours
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple setTimeout() - Redirection temporisée</title>
<script>
var debut = new Date();
debut = Date.parse(debut) / 1000;
var count = 20;
function CountDown() {
var temps = new Date();
temps = Date.parse(temps) / 1000;
var x = parseInt(count - (temps - debut), 10);
if (document.form) {
document.form.compte.value = x;
}
if (x > 0) {
timerID = setTimeout("CountDown()", 100);
} else {
location.href = "https://www.oujood.com/js/";
}
}
window.setTimeout('CountDown()', 100);
</script>
</head>
<body>
<form name="form">
Vous serez redirigé dans
<input type="text" name="compte" size="2" value="20">
secondes.
</form>
</body>
</html>
Par carabde 30 mars 2014 | mise à jour 15 mars 2025