Question

我想在while循环中创建一个暂停，以便我可以创建n个动画，每个动画在3秒后出现。

我尝试了以下内容，但它不起作用。很想有人告诉我我做错了什么。谢谢！

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

};

Answer 1

setTimeout不停顿;它要求Javascript稍后运行其他代码。

Google搜索“setTimeout循环”会告诉您确切需要了解的内容。如果你环顾一下，它甚至提到了setInterval。区别：使用setTimeout循环将在循环之间等待3秒，而setInterval将使循环总共花费3秒（包括动画花费的时间，只要它少于3秒:)）。此外，setInterval构造一个无限循环，您必须在所需的次数之后突破该循环; setTimeout要求你自己构造循环。

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

Answer 2

setTimeout比这更棘手，因为它不会阻塞（即在继续执行程序之前它没有等待超时）。

你想要的更接近这个：

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

作为一种可能的选择，阅读setInterval也可能值得您花些时间。

Answer 3

其中一种方法是使用RxJS。请查看working example here

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

Answer 4

好吧，多亏了ES6-7和Promise，我们现在可以暂停一下，让它看起来很漂亮！

Answer 5

您对自己想做的事情并不十分具体，但我要说的主要问题是您可以毫不拖延地致电someanimation()。所以也许这可以解决它：

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

请注意()之后丢失的someanimation，因为它是setTimeout()的回调。

Answer 6

创建一个类似的函数：

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

然后将代码更改为

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

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

在javascript中在while循环内创建一个暂停

7 个答案: