【问题标题】：How to add delay in javascript for loop using setTimeout?如何使用 setTimeout 在 javascript for 循环中添加延迟？
【发布时间】：2017-10-30 12:29:08
【问题描述】：

我想保持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}} // 等待延迟

5点结束

6点结束

7点结束

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

结束于 0

结束于 1

5点结束

6点结束

7点结束

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

我希望ended at 5 等到第 3、第 4、第 5 个数组索引的超时功能。我需要有人帮我解决这个问题。提前致谢。

【问题讨论】：

你的 setTimeout 代码部分写得很好...尝试 ES6 方法：setTimeout(() => { console.log('waiting 1 second...'); }, 1000);
setTimeout 将安排一个后台任务，然后立即返回。所以你的循环继续运行，延迟后超时功能被执行，所以它不能那样工作。在您的情况下，最好的解决方案可能是摆脱 for 循环并用回调循环替换它，因此在每次延迟执行后，它会使用下一个索引调用“循环”，直到数组结束。

标签： javascript for-loop settimeout

【解决方案1】：

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

【讨论】：

【解决方案2】：

希望我能理解您的问题，请参阅此 Fiddle。 https://fiddle.jshell.net/qw6qp7pm/1/（使用下划线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()

【讨论】：

【解决方案3】：

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

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

【讨论】：