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

Question

我想在while循环中创建一个暂停,这样我就可以创建n每个都在3秒后出现的动画.

我尝试了以下,但它不起作用.很想有人告诉我我做错了什么.谢谢!!

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

};

Answer 1

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

谷歌搜索"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

好吧，感谢 ES6-7 with Promises 我们现在可以暂停一下，同时让它看起来很漂亮！

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

Answer 4

实现此目的的方法之一是使用 RxJS。请看一下这里的工作示例

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