我想在 while 循环中创建一个暂停，以便我可以创建 n 动画，每个动画在另一个之后出现 3 秒。
我尝试了以下方法，但它不起作用。希望有人告诉我我做错了什么。
i=0;
while (i < n) {
someanimation();
setTimeout(function(){
i++;
}, 3000);
};
【问题讨论】：
标签： javascript while-loop dom-events
setTimeout 不会暂停；它要求 Javascript 稍后运行其他代码。
搜索“setTimeout 循环”可以准确告诉您需要了解的内容。如果你环顾四周，它甚至会提到 setInterval。区别：使用 setTimeout 循环将在循环之间等待 3 秒，而 setInterval 将使循环总共需要 3 秒（包括动画花费的时间，只要它少于 3 秒 :) ）。此外， setInterval 构造了一个无限循环，您必须在所需的次数后退出该循环； setTimeout 需要你自己构建循环。
i = 0;
// setTimeout approach
function animation_loop() {
someAnimation();
setTimeout(function() {
i++;
if (i < n) {
animation_loop();
}
}, 3000);
};
animation_loop();
// setInterval approach
i = 0;
someAnimation();
iid = setInterval(function() {
i++;
if (i < n) {
someAnimation();
} else {
clearInterval(iid);
}
}, 3000);
【讨论】：
setInterval。我最好在i >= n时清除setInterval。
好吧，感谢带有 Promises 的 ES6-7，我们现在可以暂停一下，同时让它看起来更漂亮！
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();
【讨论】：
其中一种方法是使用 RxJS。请看working example here
Rx.Observable
.interval(1000)
.take(10)
.subscribe((x) => console.log(x))
【讨论】：
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;
}
}``
【讨论】：
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 作为一种可能的替代方案。
【讨论】：
创建一个类似的函数：
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();
};
【讨论】：
您对自己想要做什么并不是很具体，但我想说主要问题是您毫不拖延地致电someanimation()。所以也许这可以为你解决：
for (var i = 0; i < n; i++) {
setTimeout(someanimation, 3000 * i);
};
注意someanimation 后面缺少的()，因为它是setTimeout() 的回调。
【讨论】：
someanimation() 的下一次调用。