Fonctions setTimeout et setInterval dans ECMAScript

View more Tutorials:

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: