web-dev-qa-db-fra.com

Créer une pause dans une boucle while en javascript

Je voudrais créer une pause à l'intérieur d'une boucle while afin de pouvoir créer des animations n qui apparaissent chacune 3 secondes après l'autre.

J'ai essayé ce qui suit, mais cela ne fonctionne pas. J'adorerais que quelqu'un me montre ce que je fais mal. Merci!!

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

};
javascript-eventswhile-loop
23
djianp

setTimeout ne s'arrête pas; il demande à Javascript d'exécuter un autre code plus tard.

La recherche de "boucle setTimeout" vous indique exactement ce que vous devez savoir. Si vous regardez un peu, il mentionne même setInterval. La différence: l'utilisation de setTimeout pour boucler attendra 3 secondes entre les boucles, tandis que setInterval lui prendra 3 secondes au total pour la boucle (y compris le temps que prend l'animation, tant qu'elle est inférieure à 3 secondes :)). En outre, setInterval construit une boucle infinie que vous devrez rompre après le nombre de fois souhaité; setTimeout vous oblige à construire la boucle 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);
37
Karl Knechtel

setTimeout est un peu plus compliqué que cela car il ne bloque pas (c'est-à-dire qu'il ne finit pas d'attendre le délai avant de continuer avec le programme).

Ce que vous voulez est plus proche de cela:

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 lire sur setInterval comme alternative possible.

11
psmay

Eh bien, grâce à ES6-7 avec Promises, nous pouvons maintenant faire une pause et la rendre belle 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();
4
Telion

L'une des façons de le faire est d'utiliser RxJS. Veuillez consulter exemple de travail ici

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))
3
Vlad Bezden
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;
}
}``
0
for

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 le résout pour vous:

for (var i = 0; i < n; i++) {
    setTimeout(someanimation, 3000 * i);
};

Notez le () Manquant après someanimation car il s'agit du rappel de setTimeout().

0
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 changez votre code en

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