Fonctions setTimeout et setInterval dans ECMAScript

View more Tutorials:

1- setTimeout() function
2- La fonction setInterval()
Dans le  ECMAScript, setTimeout(func, time) et  setInterval(func,time) sont les deux fonctions assez similaires. Elles sont chronométrés afn d'accomplir un devoir. Dans cette leçon, je vais discuter de chacune fonction.

1- setTimeout() function

La fonction  setTimeout(func, delay) établit un délai de millisecond   'delay', lorsque cette période de temps s'écoule, la fonction  func sera appelée une seule fois.
Remarque : 1 seconde = 1000 mili secondes
La syntaxe : 

setTimeout(func, delay)
  • func: Cette fonction sera appelée après millisecondes 'delay'.
  • delay:  délai d'attente (en miliseconde)
Ci-dessous l'exemple simple de la fonction  setTimeout(). Après 3 secondes, lorsque l'utilisateur clique sur "Show greeting", un message d'accueil s'affichera.
setTimeout-example.html 
<!DOCTYPE html>
<html>
   <head>
      <title>setTimeout function</title>

      <script type="text/javascript">

         function greeting()  {

              alert("Hello Everyone!");
         }

         function startAction()  {

            setTimeout(greeting, 3000); // 3 seconds.
         }

      </script>

   </head>
   <body>
      <h2>setTimeout Function</h2>


      <button onclick="startAction()">Show greeting</button>

   </body>
</html>
Un autre exemple avec la fonction  setTimeout(), vous pouvez exécuter cet exenoke dans l'environnement  NodeJS :
setTimeout-example.js 

console.log("3");
console.log("2");
console.log("1");
console.log("Call setTimeout!");

setTimeout( function() {
  console.log("Hello Everyone!");
}, 3000); // 3 seconds

console.log("End!");

clearTimeout()

Supposons que vous appelez la fonction  setTimeout() afin d'effecter une tâche, tant que la tâche n'est pas effectée, vous pouvez l'annuler en appelant la fonction clearTimeout().
clearTimeout-example.html 
<!DOCTYPE html>
<html>
   <head>
      <title>clearTimeout function</title>

      <script type="text/javascript">
         var myTask = null;

         function greeting()  {
              alert("Hello Everyone!");
              myTask = null;
         }

         function startAction()  {
            if(!myTask) {
               myTask = setTimeout(greeting, 3000); // 3 seconds.
            }
         }

         function cancelAction()  {
            if(myTask)  {
               clearTimeout(myTask);
               myTask = null;
            }
         }

      </script>

   </head>
   <body>
      <h2>setTimeout() &amp; clearTimeout() Function</h2>


      <button onclick="startAction()">Show greeting</button>

      <button onclick="cancelAction()">Cancel</button>

   </body>
</html>

2- La fonction setInterval()

La fonction  setInterval(func, delay) définit un délai d'une milisecondes  'delay', après chaque miliseconde  'delay' la fonction  func est appelée.
Syntaxe : 

setInterval(func, delay)
  • func: Cette fonction sera appelée après chaque délai de miliseconde 'delay'.
  • delay: Délai d'attente (en miliseconde)
Ci-dessous un exemple simple avec la fonction  setInterval(). Après 3 secondes que l'utilisateur clique sur le bouton  "Show greeting" un message d'accueil sera affiché et il va afficher après chaque 3 secondes,..
setInterval-example.html 
<!DOCTYPE html>
<html>
   <head>
      <title>setInterval function</title>

      <script type="text/javascript">

         function greeting()  {

              alert("Hello Everyone!");
         }

         function startAction()  {

              setInterval(greeting, 3000); // 3 seconds.
         }

      </script>

   </head>
   <body>
      <h2>setInterval Function</h2>


      <button onclick="startAction()">Show greeting</button>

   </body>
</html>
Un autre exemple avec la fonction  setInterval(), vous pouvez exécuter cet exemple dans l’environnement  NodeJS :
setInterval-example.js 

console.log("3");
console.log("2");
console.log("1");
console.log("Call setInterval!");

setInterval( function() {
   console.log("Hello Everyone!");
}, 3000); // 3 seconds

console.log("End!");

clearInterval()

Supposons que vous appelez la fonction  setInterval() pour planifier l'exécution d'une tâche, vous pouvez annuler cette tâche en appelant la fonction clearInterval().
clearInterval-example.html 
<!DOCTYPE html>
<html>
   <head>
      <title>clearInterval function</title>

      <script type="text/javascript">

         var myTask = null;

         function greeting()  {

              alert("Hello Everyone!");
         }

         function startAction()  {
              if(!myTask)  {
                  myTask = setInterval(greeting, 3000); // 3 seconds.
              }
         }

         function cancelAction()  {
              if(myTask) {
                 clearInterval(myTask);
                 myTask = null;
              }
         }

      </script>

   </head>
   <body>
      <h2>setInterval() &amp; clearInterval() Function</h2>


      <button onclick="startAction()">Show greeting</button>

      <button onclick="cancelAction()">Cancel</button>

   </body>
</html>

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.