Créer une pause à l'intérieur d'une boucle while en javascript

Je voudrais créer une pause à l'intérieur d'un while boucle afin que je puisse créer n animations qui apparaissent chaque 3 secondes après l'autre.

J'ai essayé, mais ça ne fonctionne pas. Aimeraient avoir quelqu'un me montrer ce que je fais mal. Merci!!

i=0;
while (i < n) {
    someanimation();
    setTimeout(function(){
        i++;
    }, 3000);

};

Double Possible de Comment puis-je ajouter un retard dans une boucle JavaScript?

InformationsquelleAutor djianp | 2010-12-28

javascript-events while-loop

38

setTimeout ne fait pas une pause; il demande de Javascript pour exécuter d'autres codes plus tard.

Googler "setTimeout" en boucle qui vous dit exactement ce que vous devez savoir. Si vous regardez autour de vous un peu, il mentionne même setInterval. La différence: à l'aide de setTimeout pour boucle d'attente de 3 secondes entre les boucles, alors que setInterval permettra de faire prendre 3 secondes au total pour la boucle (y compris cependant beaucoup de temps à l'animation, tant que c'est de moins en moins de 3 secondes 🙂 ). Aussi, setInterval construit une boucle infinie que vous allez avoir à sortir de après la le nombre désiré de fois; setTimeout vous oblige à construire la boucle de vous-même.
```
i = 0;

function animation_loop() {
  someAnimation();
  setTimeout(function() {
    i++;
    if (i < n) {
      animation_loop();
    }
  }, 3000);
};
animation_loop();

i = 0;
someAnimation();
setInterval(function() {
  i++;
  if (i < n) {
    someAnimation();
  }
}, 3000);
```
- you rock!! merci beaucoup - je suis un vrai débutant, donc je ne suis pas familier avec les expressions idiomatiques et je ne le sait pas toujours quels sont les meilleurs mots clés pour google. De toute façon, vous avez vraiment débloqué m'en grand!!
- Cette réponse présente une infinie setInterval. Je pas faire mieux pour effacer le setInterval quand i >= n.
InformationsquelleAutor Karl Knechtel
11

setTimeout est un peu plus compliqué que cela, car il ne bloque pas (c'est à dire qu'il n'a pas fini d'attente le délai d'attente avant de continuer avec le programme).

Ce que vous voulez est plus proche de ceci:
```
var i = 0;
function nextFrame() {
    if(i < n) {
        someanimation();
        i++;
        //Continue the loop in 3s
        setTimeout(nextFrame, 3000);
    }
}
//Start the loop
setTimeout(nextFrame, 0);
```
Il peut également être utile de votre temps à lire sur les setInterval comme une alternative possible.

InformationsquelleAutor psmay

Bien, grâce à ES6-7 avec les Promesses que nous pouvons maintenant faire une pause et de le rendre agréable à regarder en même temps!

var id = 0;

async function do() {
  while(true) {
    await pause(id);
    //will happen only after pause is done
    id++; 
  }
}
function pause(id) {
  return new Promise(resolve => setTimeout(() => {
    console.log(`pause ${id} is over`);
    resolve();
  }, 1500)); 
}

do();

InformationsquelleAutor Telion

3

Un de la manière de le faire est d'utiliser RxJS. Veuillez prendre un coup d'oeil à exemple de travail ici
```
Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))
```
InformationsquelleAutor Vlad Bezden
0

Vous n'êtes pas très précis sur ce que vous voulez faire, mais je dirais que le principal problème est que vous appelez someanimation() sans délai. Alors peut-être que cela résout-il pour vous:
```
for (var i = 0; i < n; i++) {
    setTimeout(someanimation, 3000 * i);
};
```
Remarque manquant () après someanimation comme c'est le rappel pour setTimeout().
- Merci de ne pas réinventer quelque chose pour lequel il existe des expressions idiomatiques.
- Knechtel: de quoi parles-tu? Ce "standard idiomes"? La vôtre est la même idée. La seule différence est que vous lancez l'appel suivant à someanimation() dans la fonction de minuterie.
- "...à vous de lancer l'appel suivant à someanimation() dans la fonction de minuterie." C'est exactement ce que la norme idiome. De cette façon, un seul rappel est mis en file d'attente à un moment.
- Cela permettra de mettre en file d'attente tous les itérations dans le même temps, et puis attendre 3 secondes pour vider les appels à someanimation en même temps.
- Vous faire comprendre le fonctionnement d'une boucle for fonctionne? Il n'est donc pas que tous les appels à someanimation() sont effectuées en même temps. Alors que Karl commentaire de sens, la vôtre n'est pas valide.
- Je pensais que c'était évident, mais ce que je voulais dire par "en même temps" est relative et efficacement même temps si someanimation est en train de faire quelque chose de trivial. Je suppose que ce que je devrais dire, c'est que votre code n'est pas d'attendre 3 secondes avant d'appeler chaque itération de someanimation. Essayez vous-même et voir.
- href="https://jsfiddle.net/fw4mmgca/" >jsfiddle.net/fw4mmgca il suffit de regarder l'heure. Et s'il vous plaît obtenir les faits, avant de vous downvote la prochaine fois.
- Nah semble plus comme un hack car vous êtes réellement en replacement tous en même temps, juste à l'augmentation des intervalles de 3 secondes, puis de 6 secondes, puis 9 secondes...). C'est brut.
InformationsquelleAutor sjngm

créer une fonction comme:

function sleep_until (seconds) {
   var max_sec = new Date().getTime();
   while (new Date() < max_sec + seconds * 1000) {}
    return true;
}

puis modifiez votre code pour

i=0;
while (i < n) {
    someanimation();
    sleep_until(3);
    do_someotheranimation();
};

le blocage de la js est précisément ce qui m'est arrivé à être à la recherche pour.
Parfois, vous ne voulez bloquer le moteur.. (j'espère juste pour le test)

InformationsquelleAutor shankhan

function myFunction() {
    var x;
for(var i=0;i<10;i++){
    if (confirm("Press a button!") == true) {
        x = "You pressed OK!";
    } else {
        x = "You pressed Cancel!";
    }
    document.getElementById("demo").innerHTML = x;
}
}``

InformationsquelleAutor for

Vous devez vous connecter pour publier un commentaire.