Mettre en pause un code javascript

[Rockleader]

Hello,

je cherche à faire une pause dans l'exécution d'une fonction.

Pour cela j'ai utilisé setTimeout...sauf que c'est pas bon ça fait simplement un timer sur la fonction sujette à setTimeout et le reste du code s'exécute comme si de rien n'était...


J'ai lu quelque part que ce n'était pas possible de faire cela en javascript mais j'ai du mal à y croire...il doit bien exister une méthode quelconque.

[WillyCagnes]

salut,
voir ces liens
http://www.commentcamarche.net/forum/affich-14668463-pause-javascript

http://stackoverflow.com/questions/16623852/how-to-pause-javascript-code-excution-for-2-seconds

http://api.jquery.com/delay/
http://www.sitepoint.com/delay-sleep-pause-wait/

[fatal_error]

salut,

setTimeout est ton amie.

à toi de designer ton code de manière à reprendre l'exécution une fois que le timeout est effectué.

[Rockleader]

Ben; c'est ce que j'ai essayé de faire là mais jme bouffe une boucle infini je pense.

Code: Tout sélectionner

//dessine un cercle de centre x,y
function circle(x,y,context)
{
       context.beginPath();
       context.lineWidth="1";
       context.arc(x,y,10, 0, 2 * Math.PI);
       context.stroke();

}

Code: Tout sélectionner

functiontest(x,y)
{
        var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
       var duree=500;
   while(y<250)
   {
      setTimeout(function(){circle(x,y,context);},duree);
      setTimeout(function(){duree=duree+100;},duree);
      setTimeout(function(){context.clearRect(x-11,y-11,22,22);},duree);
      setTimeout(function(){y=y+20;},duree);
   }

}

L'idée ici serait de dessiner un cercle
0.1 s après j'efface ce cercle et je change la position de mon cercle.

Sauf que rien ne s'affiche avec ça^^

L'idée au final c'est d'arriver à bouger un objet de façon assez fluide...

[fatal_error]

Code: Tout sélectionner

while(y<250)
  {
    setTimeout(function(){circle(x,y,context);},duree)  ;
    setTimeout(function(){duree=duree+100;},duree);
    setTimeout(function(){context.clearRect(x-11,y-11,22,22);},duree);
    setTimeout(function(){y=y+20;},duree);
  }

}


refactorise trivialement en

Code: Tout sélectionner

while(y<250)
  {
    setTimeout(function(){
      circle(x,y,context);
      duree=duree+100;
      context.clearRect(x-11,y-11,22,22);
      y=y+20;
    },duree);
  }

}


puis refactorises encore trivialement en

Code: Tout sélectionner

function plotCircle(){
  circle(x,y,context);
  duree=duree+100;
  context.clearRect(x-11,y-11,22,22);
  y=y+20;
}
while(y<250)
  {
    setTimeout(plotCircle,duree);
  }
}


puis comme tu veux incrémenter t'as qu'à faire une "récursive"

Code: Tout sélectionner

function plotCircle(){
  if(y < 250){
    circle(x,y,context);
    duree=duree+100;//est-ce vraiment désiré?
    context.clearRect(x-11,y-11,22,22);
    y=y+20;
    window.setTimeout(plotCircle, duree);
  }
}


j'ai pas fait gaffe à la portée des variables durée etc mais c'est du détail ca

[Rockleader]

L'incrémentation de durée c'est parce que j'avais remarqué que mes timeout se lançait en simultané.

Mais du coup avec ta méthode il n'y a plus besoin.


Je vais essayer de factoriser ça.


Je pensais que timeout n'autorisait qu'une fonction ou une instruction et non un ensemble d'instruction.


J'espère que cela réglera mon problème d'affichage !

[Rockleader]

J'ai ajusté quelques variables et ça marche comme sur des roulettes :zen:

Merci beaucoup je commençais à désespérer !