Fonctions setTimeout et setInterval dans ECMAScript

View more Tutorials:

Tutoriels ECMAScript, Javascript

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:

Tutoriels ECMAScript, Javascript