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

buzzkaido · 16/07/2007, 09h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

SpaceFrog · 16/07/2007, 09h45

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)}

FremyCompany · 16/07/2007, 13h06

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
)

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email