如何使用setTimeout在javascript for循环中添加延迟？

Question

我想保留for-loop的迭代，直到上一个迭代中的功能完成为止。 我已经看到了许多有关setTimeout问题，但没有一个满足我的要求。 谁能帮我？

function abcd() {
    var exArray = [0, 0, 1, 1, 1, 0, 0, 0];
    var index = 0;
    for (var i = 0; i < exArray.length; i++) {
        if (exArray[i] == 1) {
            addDelay(++index);

        } else {
            console.log('ended at ' + i);
        }
    }
}

seTimeout功能是这样的

function addDelay(index) {
    setTimeout(function() {
        console.log("in Timeout loop:" + index);
    }, 2000 * index);
}

预期的输出是

结束于0

结束于1

在超时循环中：{{index}} //等待延迟

在超时循环中：{{index}} //等待延迟

在超时循环中：{{index}} //等待延迟

结束于5

结束于6

结束于7

但是我在控制台中看到的输出是：

结束于0

结束于1

结束于5

结束于6

结束于7

在超时循环中：{{index}} //等待延迟

在超时循环中：{{index}} //等待延迟

在超时循环中：{{index}} //等待延迟

我希望ended at 5直到第3，第4，第5个数组索引的超时功能。 我需要有人来帮助我。 提前致谢。

Answer 1

希望我理解您的问题，请参阅此提琴。 https://fiddle.jshell.net/qw6qp7pm/1/ （使用Underscore JS delay() http://underscorejs.org/#delay ）

function abcd(index) {
  var exArray = [0, 0, 1, 1, 1, 0, 0, 0]
  var index = index ? index : 0
  if (index >= exArray.length) return false

  for (var i = index; i < exArray.length; i++) {
    if (exArray[i] == 1) {
      //addDelay(++index);
      _.delay(log, 2000, i)
      break
    } else {
      console.log('ended at ' + i)
    }
  }
}

function log(index) {
  console.log("in Timeout loop:" + index)

  // RECURSE
  abcd(index + 1)
}

abcd()

Answer 2

循环将为其每个索引连续执行。 因为您需要一个接一个的所有日志，这意味着您必须为每个索引设置延迟，无论其是否满足您的条件。

function abcd() {  
    var exArray=[0,0,1,1,1,0,0,0];
    var index=0;
    var message='';
    for(var i=0;i<exArray.length; i++)    {
        if(exArray[i]==1) {
           ++index;
           message='in Timeout loop:'+i;
           addDelay(index, message);
        }else{
           message='ended at '+i;
           addDelay(index, message);
        }

    }
}


function addDelay(index, message){
    setTimeout(function () {
         console.log(message);
    }, 2000*index); 
}

Answer 3

setTimeOut不能那样工作。 它只是注册要在以后的时间执行的动作，然后继续。 该脚本结束后，它将处理您排队的任务并执行。

检查setTimeout到底是如何工作的。 另外，请阅读有关JavaScript事件循环的更多信息。

var input = [0, 0, 1, 1, 1, 0, 0, 0];

function immediateOrRegister(index) {
    if (index >= input.length) return;
    if (input[index] == 0) {
        console.log("No delay");
        immediateOrRegister(index + 1);
    } else if (input[index] == 1) {
        console.log("Timing out for atleast " + 2 * index + " seconds");
        setTimeout(function() {
            immediateOrRegister(index + 1)
        }, 2000 * index);
    }
}

immediateOrRegister(0);