oujood.com

Fenêtre Les méthodes setTimeout() et clearTimeout()

La méthode setTimeout() appelle une fonction ou évalue une expression après un nombre spécifié de millisecondes (1 seconde = 1000 ms).
.....

chercher |

Définition et utilisation méthode setTimeout() 

JavaScript cours tutorial

La 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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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



Voir aussi nos tutoriel :

Les cookies

PHP les cookies

L'attribut style

Spécifie un style CSS inline à un élément

Arrière-plans de CSS3

Apprendrez les propriétés d'arrière-plan suivantes :
background-sizeélt
background-origin
Plusieurs Images d’arrière plans
Apprendrez également comment utiliser plusieurs images d'arrière-plan.