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

时间:2017-10-30 12:29:08

标签: javascript for-loop settimeout

我想保留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阵列索引的超时功能。我需要有人来帮助我。提前谢谢。

3 个答案:

答案 0 :(得分:0)

希望我理解你的问题,请看这个小提琴。 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()

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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