如何在JavaScript循环中添加延迟？

我想在

while

循环中添加延迟/睡眠：

我这样试过：

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index++
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

names = ['John', 'Ana', 'Mary'];

names.forEach((name, i) => {
 setTimeout(() => {
  console.log(name);
 }, i * 1000);  // one sec interval
});

警报（'hi'）；
对于（var start=1；start<10；start++）{
setTimeout（函数（）{
警惕（“你好”）；
}, 3000);
}

只有第一种情况是正确的：在显示

alert（'hi'）

后，它将等待3秒钟，然后将显示

alert（'hello'）

，但随后将不断重复显示

alert（'hello'）

我想要的是，在

alert（'hello'）

显示在

alert（'hi'）

之后3秒之后，它需要等待3秒，以便第二次

alert（'hello'）

等等。

该函数是非阻塞的，将立即返回。因此，您的循环将非常快速地迭代，它将快速连续地一个接一个地启动3秒超时触发器。这就是为什么您的第一个警报会在3秒钟后弹出，而所有其他警报都会毫不延迟地连续出现

您可能希望使用类似以下内容：

var i=1；//将计数器设置为1
函数myLoop（）{//创建一个循环函数
setTimeout（函数（）{//调用循环时调用3s setTimeout
console.log（'hello'）；//您的代码在这里
i++；//递增计数器
如果（i<10）{//如果计数器<10，则调用循环函数
myLoop（）；/…再次触发另一个
}//…设置超时（）
}, 3000)
}
myLoop（）；//启动循环

尝试以下操作：

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index++
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

names = ['John', 'Ana', 'Mary'];

names.forEach((name, i) => {
 setTimeout(() => {
  console.log(name);
 }, i * 1000);  // one sec interval
});

var i=0，howManyTimes=10；
函数f（）{
控制台日志（“hi”）；
i++；
如果（i<多少次）{
设置超时（f，3000）；
}
}
f（）另一种方法是将超时时间相乘，但请注意，这与睡眠不同。循环后的代码将立即执行，只有回调函数的执行被延迟

for (var start = 1; start < 10; start++)
    setTimeout(function () { alert('hello');  }, 3000 * start);

for（var start=1；start<10；start++）
setTimeout（函数（）{alert（'hello'）；}，3000*start）；

第一个超时将设置为
3000*1
，第二个超时将设置为
3000*2
，依此类推。
我想您需要这样的设置：

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index++
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

names = ['John', 'Ana', 'Mary'];

names.forEach((name, i) => {
 setTimeout(() => {
  console.log(name);
 }, i * 1000);  // one sec interval
});

测试代码：

var now = +new Date();

var x = new TimedQueue(2000);

x.add(function(){
    console.log('hey');
    console.log(+new Date() - now);
});
x.add(function(){
    console.log('ho');
    console.log(+new Date() - now);
}, 3000);
x.add(function(){
    console.log('bye');
    console.log(+new Date() - now);
});

x.run();

注意：使用警报会暂停javascript执行，直到关闭警报。
它可能比您要求的代码更多，但这是一个健壮的可重用解决方案。
我可能会使用
setInteval
。像这样,

var period = 1000; // ms
var endTime = 10000;  // ms
var counter = 0;
var sleepyAlert = setInterval(function(){
    alert('Hello');
    if(counter === endTime){
       clearInterval(sleepyAlert);
    }
    counter += period;
}, period);

我使用Bluebird的
Promise.delay
和递归来实现这一点


函数myLoop（i）{
返回承诺。延迟（1000）
.然后（函数（）{
如果（i>0）{
警惕（“你好”）；
返回myLoop（i-=1）；
}
});
}
myLoop（3）
以下是我用于在阵列上循环的函数：

function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){

    if (i < theArray.length && typeof delayAmount == 'number'){

        console.log("i "+i);

        theFunction(theArray[i], i);

        setTimeout(function(){

            loopOnArrayWithDelay(theArray, delayAmount, (i+1), theFunction, onComplete)}, delayAmount);
    }else{

        onComplete(i);
    }
}

在ES6（ECMAScript 2015）中，您可以使用延迟和间隔进行迭代

生成器是ECMAScript 6的一个新功能，是可以
停顿了一下，接着说。调用genFunc不会执行它。相反，它
返回一个所谓的生成器对象，该对象允许我们控制genFunc的
执行。genFunc（）最初在其运行开始时挂起
身体。方法genObj.next（）继续执行genFunc，
直到下一个产量。



代码示例：
让arr=[1,2,3,b']；
设genObj=genFunc（）；
设val=genObj.next（）；
console.log（val.value）；
let interval=setInterval（（）=>{
val=genObj.next（）；
如果（val.done）{
间隔时间；
}否则{
console.log（val.value）；
}
}, 1000);
函数*genFunc（）{
用于（arr的let项目）{
收益项目；
}
}
我还想把我的两分钱也寄到这里。此函数运行一个带有延迟的迭代循环。看见功能如下：

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 instantly
for (var i = 0; i<5; i++){
    console.log(i);
}

//此函数立即打印循环编号
对于（var i=0；i
var startIndex=0；
var数据=[1,2,3]；
var超时=1000；
功能运行（i，长度）{
警报（数据[i]）；
}
（带延迟功能（i、长度、fn、延迟）{
setTimeout（函数（）{
fn（i，长度）；
i++；
如果（i<长度）{
用于延迟（i，长度，fn，延迟）；
}
}，延误）；
})（startIndex、data.length、functionToRun、timeout）；
如果使用ES6，可以使用for循环来实现这一点：


for（设i=1；i<10；i++）{
setTimeout（函数计时器（）{
log（“你好世界”）；
}，i*3000）；
}
您可以使用RxJS。Interval每x秒发出一个整数，take是指定它必须发出numbers的次数


Rx.Observable
.间隔（1000）
.take（10）
.subscribe（（x）=>console.log（x））
这样就行了

for（变量i=0；i<10；i++）{
（职能（一）{
setTimeout（函数（）{console.log（i）；}，100*i）；
})（i） )；
}

试试这把小提琴：
因为ES7有更好的方法等待循环：

下面是我如何创建一个无限循环，在特定条件下延迟中断：

  // Now continuously check the app status until it's completed, 
  // failed or times out. The isFinished() will throw exception if
  // there is a failure.
  while (true) {
    let status = await this.api.getStatus(appId);
    if (isFinished(status)) {
      break;
    } else {
      // Delay before running the next loop iteration:
      await new Promise(resolve => setTimeout(resolve, 3000));
    }
  }

这里的关键是创建一个通过超时解决的新承诺，并等待它的解决

显然，您需要异步/等待支持。在节点8中工作。
对于常用的“忘记正常循环”，使用“setInterval”的组合包括“setTimeOut”：如下所示（来自我的实际任务）

函数iAsk（lvl）{
var i=0；
var intr=setInterval（函数（）{//启动循环
i++；//递增它
如果（i>lvl）{//检查是否达到结束轮。
清除间隔（intr）；
返回；
}
setTimeout（函数（）{
$（“.imag”）.prop（“src”，pPng）；//在50毫秒后执行第一个bla bla bla bla bla bla
},50);
塞蒂姆
var count = 0;

//Parameters:
//  array: []
//  fnc: function (the business logic in form of function-,what you want to execute)
//  delay: milisecond  

function delayLoop(array,fnc,delay){
    if(!array || array.legth == 0)return false;
    setTimeout(function(data){ 
        var data = array[count++];
        fnc && fnc(data);
        //recursion...
        if(count < array.length)
            delayLoop(array,fnc,delay);
        else count = 0;     
    },delay);
}

names = ['John', 'Ana', 'Mary'];

names.forEach((name, i) => {
 setTimeout(() => {
  console.log(name);
 }, i * 1000);  // one sec interval
});

var loop=(i,time)=>new Promise(r=>{
 alert("aaa",i);
 if(i>0)
 setTimeout(()=>{
    r([i-1,time]);
 },time);
}).then(v=>loop(v[0],v[1]))

loop(3,1000);

const autoPlayer = (arr = [1, 2, 3, 4, 5]) => {
  // Base case:
  if (arr.length < 1) return

  // Remove the first element from the array.
  const item = arr.shift()

  // Set timout 
  setTimeout(() => {
    console.log('Hello, world!', item)  // Visualisation.
    autoPlayer() // Call function again.
  }, 1000) // Iterate every second.
}