我想在一个while循环内添加延迟/休眠：
我尝试像这样实现：
alert('hi');
for(var start = 1; start < 10; start++) {
setTimeout(function () {
alert('hello');
}, 3000);
}
只有第一种情况是正确的：显示 alert('hi') 后，它将等待3秒钟，然后显示 alert('hello')，但随后 alert('hello') 将不断地重复显示。
我希望的是，在显示 alert('hi') 之后3秒钟后显示 alert('hello')，然后再等待3秒钟显示第二次 alert('hello')，以此类推。
在ES6（ECMAScript 2015）中，您可以使用生成器和间隔迭代。
生成器是ECMAScript 6的新功能，它们是可以暂停和恢复的函数。调用genFunc不会执行它。相反，它返回一个所谓的生成器对象，让我们控制genFunc的执行。genFunc()最初在其主体开始时被暂停。方法genObj.next()继续执行genFunc，直到下一个yield。 (探索ES6)
Code example:
let arr = [1, 2, 3, 'b'];
let genObj = genFunc();
let val = genObj.next();
console.log(val.value);
let interval = setInterval(() => {
val = genObj.next();
if (val.done) {
clearInterval(interval);
} else {
console.log(val.value);
}
}, 1000);
function* genFunc() {
for(let item of arr) {
yield item;
}
}如果您正在使用ES6，则这是实现带延迟的循环的最优雅方法（我个人认为）。
await new Promise((resolve) => {setTimeout(() => {resolve(true)}, 190)});
作为常用的使用不同超时间隔的多个 setTimeout 可能会混乱内存的替代方法，这是一个异步函数中的实际延迟。在此片段中，延迟为190毫秒。
示例：
await一个new Promise以进行resolve。setTimeout后，它才允许发生。在此之前，代码被异步等待/挂起的Promise阻塞。async function delayTest() {
for (let i=0; i<100; i++) {
await new Promise((resolve) => {setTimeout(() => {document.write(`${i} `); resolve(true)}, 190)});
}
};
delayTest()function myLoop(i) {
return Promise.delay(1000)
.then(function() {
if (i > 0) {
alert('hello');
return myLoop(i -= 1);
}
});
}
myLoop(3);<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js"></script>setTimeout而不是bluebeard可以正常工作，避免了依赖。我不会在这里使用i -= 1。如果添加更多使用调用中的i的逻辑，例如，用于索引数组，则可能具有意外值。此外，它实际上并不是递归的；子调用发生之前，调用堆栈就已经清除了。它只是恰好是相同的函数。您可以通过0的超时/延迟和几百万的i来证明这一点。 - ggorlen for (let i = 0; i <= 10; i++){
setTimeout(function () {
console.log(i);
}, i*3000)
}for (var i = 0; i <= 10; i++){
(function(i) {
setTimeout(function () {
console.log(i);
}, i*3000)
})(i);
}let 允许你声明变量，这些变量仅限于块语句或表达式的作用域中使用，而不像 var 关键字一样定义全局变量或者整个函数的局部变量，无论块作用域如何。alert('hi');
for(var start = 1; start < 10; start++) {
setTimeout(() => alert('hello'), 3000 * start);
}
我想在这里也发表一下我的意见。这个函数运行一个带有延迟的迭代循环。请参考这个 jsfiddle。该函数如下：
function timeout(range, time, callback){
var i = range[0];
callback(i);
Loop();
function Loop(){
setTimeout(function(){
i++;
if (i<range[1]){
callback(i);
Loop();
}
}, time*1000)
}
}
例如：
//This function prints the loop number every second
timeout([0, 5], 1, function(i){
console.log(i);
});
等同于：
//This function prints the loop number instantly
for (var i = 0; i<5; i++){
console.log(i);
}
setTimeout函数是异步调用的。您可以将整个循环包装在一个异步函数中，并等待包含setTimeout的Promise，如下所示：var looper = async function () {
for (var start = 1; start < 10; start++) {
await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("iteration: " + start.toString());
resolve(true);
}, 1000);
});
}
return true;
}
然后你可以这样运行它：
looper().then(function(){
console.log("DONE!")
});
async/await/Promise()或生成器函数来实现正确的行为。(其他答案中建议的错误行为将设置一系列3秒警报，而不管是否"接受"alert() - 或完成手头的任务)
Using async/await/Promise():
alert('hi');
(async () => {
for(let start = 1; start < 10; start++) {
await new Promise(resolve => setTimeout(() => {
alert('hello');
resolve();
}, 3000));
}
})();使用生成器函数：
alert('hi');
let func;
(func = (function*() {
for(let start = 1; start < 10; start++) {
yield setTimeout(() => {
alert('hello');
func.next();
}, 3000);
}
})()).next();interval 操作符。interval 每隔 x 秒就会发出一个整数，而 take 指定了它发出这些数字的次数。
Rx.Observable
.interval(1000)
.take(10)
.subscribe((x) => console.log(x))<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script> var startIndex = 0;
var data = [1, 2, 3];
var timeout = 1000;
function functionToRun(i, length) {
alert(data[i]);
}
(function forWithDelay(i, length, fn, delay) {
setTimeout(function() {
fn(i, length);
i++;
if (i < length) {
forWithDelay(i, length, fn, delay);
}
}, delay);
})(startIndex, data.length, functionToRun, timeout);这是 Daniel Vassallo 的答案的修改版本，将变量提取为参数，使函数更具可重用性：
首先让我们定义一些必要的变量：
var startIndex = 0;
var data = [1, 2, 3];
var timeout = 3000;
接下来，您应该定义要运行的函数。这将传递i，循环的当前索引和循环的长度，以防您需要它：
function functionToRun(i, length) {
alert(data[i]);
}
(function forWithDelay(i, length, fn, delay) {
setTimeout(function () {
fn(i, length);
i++;
if (i < length) {
forWithDelay(i, length, fn, delay);
}
}, delay);
})(startIndex, data.length, functionToRun, timeout);
功能版本
function forWithDelay(i, length, fn, delay) {
setTimeout(function () {
fn(i, length);
i++;
if (i < length) {
forWithDelay(i, length, fn, delay);
}
}, delay);
}
forWithDelay(startIndex, data.length, functionToRun, timeout); // Lets run it