For 循环暂停，但一次打印出所有数组答案

【问题标题】：For loop pauses, but prints out the Array all at onceFor 循环暂停，但一次打印出所有数组
【发布时间】：2018-11-13 19:03:42
【问题描述】：

我在 Grok 一个简单的 JavaScript for 循环时遇到了麻烦。

这是一个例子：

var arr = ["Banana", "Orange", "Apple", "Mango"];
for (i = 1; i <= 5; ++i) {
  setDelay(i);
}

function setDelay(i) {
  setTimeout(function(){
    for(const value of arr) {
    document.write(value);
    document.write("<br />");
    }
  }, i * 1000);
}

我要做的是在打印第一个值后暂停，而是运行整个 For 循环然后暂停。我想我正在尝试用 for 循环做一些不起作用的事情，但我想知道为什么。

任何帮助将不胜感激。

请戳这里：https://plnkr.co/edit/tnmFrIRTDJI8T294Qh4z?p=preview

Javascript, setTimeout loops? 的例子并没有帮助我弄清楚。正如 George Pantazes 指出的那样，我的概念仍然是错误的。

【问题讨论】：

Javascript, setTimeout loops?的可能重复
通过运行您的代码，您可以看到您正在打印setTimeout 中的整个数组。如果您像arr[i] 一样访问您的数组并且只打印一项而不是全部，您的代码将按您的意愿工作，而不是在setTimeout for 循环中循环整个arr。

标签： javascript

【解决方案1】：

在 setTimeout 内部 - 不是打印整个数组，而是打印当前元素。

var arr = ["Banana", "Orange", "Apple", "Mango"];
for (let i = 1; i < 5; ++i) {
  setDelay(i);
}

function setDelay(i) {
  setTimeout(function(){
    console.log(arr[i-1])
  }, i * 1000);
}

【讨论】：

你为什么使用 1-i？从 i = 1 开始会更好吗？我确实知道数组索引从 0 开始。哦等等，所以数组是四长，所以你将 i 更改为等于 1 匹配偏移量？如果我做 i
是的，你是对的，因为你有 4 个数组元素并且数组索引从 0 开始
最好做 i

【解决方案2】：

您的代码中存在多个问题：

请务必注意 Javascript 数组是从 0 开始的。您从 1 点开始。
同样，请务必注意索引的结束边界（在您的 for 循环中）。即使对于 1 个基地来说，它也太过分了（它会在 4 个可用项目中达到 5 个）
在setTimeout 中，您使用for(const value of arr) 打印整个阵列。您可能试图将 i 作为索引传递给仅索引一个元素。

考虑到这些 cmets，以下是更改了这些部分的工作代码：

var arr = ["Banana", "Orange", "Apple", "Mango"];
for (i = 0; i < arr.length; ++i) {
  setDelay(i);
}

function setDelay(i) {
  setTimeout(function(){
    document.write(arr[i]);
    document.write("<br />");
  }, i * 1000);
}

【讨论】：

请参阅@Nitish-Narang 的回答以获得更好的 Javascript 代码样式，尽管我认为我对索引的建议也值得采纳。
哇，谢谢。我试图通过将 i = 设置为数组（出于绝望）来做到这一点，但这更有意义。我可以访问数组和 i。这样我就可以使用 arr[i]。

【解决方案3】：

在循环中使用setTimeout 创建延迟的另一种方法是setInterval 函数。 setInterval 将在每次经过指定的毫秒持续时间时执行函数参数：

var arr = ["Banana", "Orange", "Apple", "Mango"];
var i = 0;
var intervalId = setInterval(logNext, 1000);

function logNext() {
  if (i < arr.length) {
    console.log(arr[i++]);
  } else {
    console.log('End of array reached!');
    clearInterval(intervalId);
  }
}

【讨论】：