Non pris en charge HTML5. Définit un acronyme
Définition et utilisation méthode setTimeout()
JavaScript cours tutorialLa méthode setTimeout() appelle une fonction ou évalue une expression après un nombre spécifié de millisecondes (1 seconde = 1000 ms).
Astuce : La fonction s'exécute uniquement une fois. Si vous avez besoin de répéter l'exécution, utilisez la méthode setInterval() .
Astuce : Utilisez la méthode clearTimeout() pour empêcher l’exécution de la fonction.
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>
<p>Cliquer le bouton pour voir le résultat</p>
<button onclick="maFonction()"> ENVOYER </button>
<script>
function maFonction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
Appui de navigateur
La méthode setTimeout() est prise en charge dans tous les principaux navigateurs.
Syntaxe
setTimeout(fonction,millisecondes,langage)
Valeurs de paramètre
| Paramètre | Description |
|---|---|
| fonction | Obligatoire. La fonction qui sera exécutée |
| millisecondes | Obligatoire. Le délais en millisecondes avant l’exécution de la fonction |
| langage | Optionel. le langage du script : JavaScript | VBScript |
Valeur de retour
| Un entier avec la valeur de l'ID de l'horloge qui est définie. Utilisez cette valeur avec la méthode clearTimeout() pour annuler la minuterie. |
Définition et utilisation la méthode clearTimeout()
La méthode clearTimeout() arrête une minuterie défini avec la méthode setTimeout() .
La valeur de l'ID retournée par setTimeout() est utilisée comme paramètre pour la méthode de clearTimeout().
Remarque : Pour être en mesure d'utiliser la méthode clearTimeout(), vous devez utiliser une variable globale lors de la création de la méthode de délai d'attente :
myVar = setTimeout("javascript function",milliseconds);
Ensuite, si la fonction n'a pas déjà été exécutée, vous serez en mesure d'arrêter l'exécution en appelant la méthode clearTimeout().
Exemple Utiliser clearTimeout pour empêcher la fonction de s’exécuter :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple méthode setTimeout() Utiliser
clearTimeout pour empêcher l’exécution de la fonction
</title>
</head>
<p>En cliquant sur le bouton "marche" une boite d'alerte
est affichée après une attente de 3 secondes.</p>
<p>Mais si vous Cliquez sur le bouton "stop" avant que les
3 secondes ne soit écoulées vous aller empêcher l'exécution de la
première 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>
Appui de navigateur
La méthode clearTimeout() est prise en charge dans tous les principaux navigateurs.
Syntaxe
clearTimeout(id_de_setTimeout)
Valeurs de paramètre
| Paramètre | Description |
|---|---|
| id_de_setTimeout | Obligatoire. La valeur de l'ID du timer retourné par la méthode setTimeout() |
Autres exemples
Exemple Afficher un texte synchronisé :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple méthode setTimeout()</title>
</head>
<p>Cliquez sur le bouton ci-dessous. Le champ de saisie
affichera le temps quand deux, quatre et six secondes serons
écoulés</p>
<button onclick="afficheTexte()">Voir</button>
<input type="text" id="texte">
<script>
function afficheTexte()
{
var x = document.getElementById("texte");
setTimeout(function(){x.value="2 seconds"},2000);
setTimeout(function(){x.value="4 seconds"},4000);
setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</body>
</html>
Exemple Ouvrir une nouvelle fenêtre et la fermer au bout de trois secondes (3 000 millisecondes) :
Ouvre automatiquement une petite fenêtre et le ferme après un certain temps. Idéal pour l'affichage des messages importants sans forcer les utilisateurs à fermer plusieurs fenêtres!
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple méthode setTimeout()</title>
</head>
<p>Cliquez sur le bouton pour ouvrir une nouvelle fenêtre
et la fermer après quatre secondes (4 000
millisecondes)</p>
<button onclick="ouvreFenetre()">Ovrir</button>
<script>
function ouvreFenetre()
{
var myWindow = window.open("","myWindow","width=400,height=150");
myWindow.document.write("<p><b>cette fenêtre sera
fermée dans 4 secondes soit
4000millisecondes.</b></p>");
setTimeout(function(){myWindow.close()},3000);
}
</script>
</body>
</html>
Exemple Comment créer un comptour avec un bouton d'arrêt :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple méthode setTimeout() comment créer
un compteur </title>
</head>
<button onclick="startCount()">commencer le
compte!</button>
<input type="text" id="txt">
<button onclick="stopCount()">Stop compte!</button>
<p>
Cliquez sur le bouton « commencer le compte! » ci-dessus pour
démarrer la compteur. Le champ de saisie va afficher le compte
en commençant à 0. Cliquez sur le bouton "Stop compte!" pour
arrêter le décompte. Cliquez sur le bouton « commencer le compte!
» pour reprendre le compte.
</p>
<script>
var compte = 0;
var param;
var timer_compte = 0;
function compteur()
{
document.getElementById("txt").value=compte;
compte = compte+1;
param = setTimeout(function(){compteur()},1000);
}
function startCount()
{
if (!timer_compte)
{
timer_compte=1;
compteur();
}
}
function stopCount()
{
clearTimeout(param);
timer_compte=0;
}
</script>
</body>
</html>
Exemple redirection avec compte à rebours
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple méthode setTimeout()</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 rederiger dans
<input type="text" name="compte" size="2" value="20">
secondes.
</form>
</body>
</html>
Par carabde 30 mars 2014