Create a pause inside a while loop in javascript

问题

I would like to create a pause inside a while loop so that I can create n animations that each appear 3 seconds after the other.

I've tried the following, but it doesn't work. Would love to have someone show me what I'm doing wrong. Thanks!!

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

};

回答1:

setTimeout does not pause; it asks Javascript to run some other code later.

Googling for "setTimeout loop" tells you exactly what you need to know. If you look around a little bit, it even mentions setInterval. The difference: using setTimeout to loop will wait 3 seconds in between loops, whereas setInterval will make it take 3 seconds total for the loop (including however much time the animation takes, as long as it's less than 3 seconds :) ). Also, setInterval constructs an infinite loop that you'll have to break out of after the desired number of times; setTimeout requires you to construct the loop yourself.

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

回答2:

setTimeout is a little trickier than that because it doesn't block (i.e. it doesn't finish waiting on the timeout before continuing with the program).

What you want is closer to this:

var i = 0;
function nextFrame() {
    if(i < n) {
        someanimation();
        i++;
        // Continue the loop in 3s
        setTimeout(nextFrame, 3000);
    }
}
// Start the loop
setTimeout(nextFrame, 0);

It may also be worth your while to read up on setInterval as a possible alternative.

回答3:

Well, thanks to ES6-7 with Promises we can now make a pause and make it look nice at the same time!

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:

One of the way of doing it is to use RxJS. Please take a look at working example here

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))

回答5:

You are not very specific about what you want to do, but I'd say the main problem is that you call someanimation() without a delay. So maybe this solves it for you:

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

Note the missing () after someanimation as it is the callback for setTimeout().

回答6:

create a function like:

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

and then change your code to

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

回答7:

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;
}
}``

来源：https://stackoverflow.com/questions/4548034/create-a-pause-inside-a-while-loop-in-javascript

标签

javascript-events

while-loop