[SRC] - Sleep - Faire une pause dans une fonction Javascript

Version imprimable

Le but de cette source est de pouvoir faire l'equivalent d'un "sleep" dans une fonction javascript.

Pour cela, on divise le traitement en plusieurs etapes, avec une pause entre chaque etape.

Pour effectuer la pause, on utilise la fonction setTimeout qui va lancer l'etape suivante à la fin de la pause :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function fonctionAEtape(etape)
{
    switch(etape)
    {
       case 1 :
           // On fait les actions de l'etape 1
           // Et on fait une pause
          setTimeout("fonctionAEtape(2)",1000);
          break;
       case 2 :
           // On fait les actions de l'etape 2
           // Et on fait une pause
          setTimeout("fonctionAEtape(3)",1000);
          break;
       case 3 :
           // On fait les actions de l'etape 3
           // Et on fait une pause
          setTimeout("fonctionAEtape(4)",1000);
          break;
       case 4 :
           // On fait les actions de l'etape 4
           // Et on c'est fini
          break;
    }
}

Il suffit de lancer l'étape 1 de la fonction : fonctionAEtape(1) et toutes les etapes s'exectueront à la suite, avec une pause entre chaque.

Il est evidemment possible de regler la durée des pauses (fonction setTimeout) et de passer d'une etape 2 à une etape 4, par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
       case 2 :
           // On fait les actions de l'etape 2
           // Si le resulat d'un test est positif :
           // on passe à l'etape 3 après une pause de 2 secondes
           // sinon on retourne à l'etape 1 après une pause d'une seconde
           if (monTest == true)
              setTimeout("fonctionAEtape(3)",2000);
           else
              setTimeout("fonctionAEtape(1)",1000);
          break;

Je rajouterais juste une petite modification pour la clarté.
Il suffit d'avoir différentes fonctions et de les ordonnancer avec ce script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<script type='text/javascript'>
function mafonction1(){alert('1')}
function mafonction2(){ alert('2')}
function mafonction3(){alert('3')}
function mafonction4(){alert('4')}
 
function fonctionAEtape(etape) {  
        switch(etape)  {  case 1 : mafonction1(); 
                                            setTimeout(function(){fonctionAEtape(2)},10000);
                                            break;
                                case 2 : mafonction2();
                                            setTimeout(function(){fonctionAEtape(3)},10000);
                                            break;
                                case 3 : mafonction3();
                                            setTimeout(function(){fonctionAEtape(4)},10000); 
                                            break;
                                case 4 : mafonction4()
                                            break;
                            }
       }
</script>       
</head>
 
<body onload="fonctionAEtape(1)">
 
</body>
 
</html>

si la tempo est constante ça peut se réduire à :

Code:

1
2
 var FuncArray=new Array('mafonction1','mafonction2','mafonction2','mafonction3')
		for(i=0;i<FuncArray.length-1;i++){setTimeout(function(){window[FuncArray[i]]()},i*5000)}

Peut-être aussi un test à chaque étape, un gestion des arguments et un callBack ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function stepFunction(args, onFinalStepCalled, onAbort, etape) {  
  try {
    switch (etape) {
       case window["@Undefined"]:
       case 0:
         /* Traitement : 1e étape */
         setTimeout(function () {
              stepFunction(args, onFinalStepCalled, onAbort, 1)
         }, 10000)
         return true;
       case 1:
         /* Test de type 1 : Si faux, patientez */
         if (typeof document.getElementById('x') == "undefined") {
             setTimeout(function () {
                 stepFunction(args, onFinalStepCalled, onAbort, 1)
             }, 500)
         }
         /* Traitement : 2e étape */
         setTimeout(function () {
              stepFunction(args, onFinalStepCalled, onAbort, 2)
         }, 10000)
         return true;
       case 2:
         /* Test de type 2 : si faux, stopper le traitement */
         if (!document.getElementById('x').firstChild) {
            try { onAbort(2, args) } catch (ex) {}
            return false;
         }
         /* Traitement : 3e étape */
         try { onFinalStepCalled(2, args) } catch (ex) {}
    }
  } catch (ex) {
     onAbort(etape?etape:0, args);
  }
}

Exemple d'appel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
stepFunction(
  /* args = */ {
     id: "anID",
     name: "aName"
  },
  function(step, args) {
     alert("OK !");
  },
  function(step, args) {
     alert("L'étape " + step + " a échoué. \n\nL'ID était : '" + args.id + "'");
  },
  0
)