Question

我在编写简单的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）指出的那样，我仍然对这个概念有误。

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

Answer 2

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

请确保Javascript数组基于0。您从1开始。
类似地，请务必注意索引的结尾范围（在您的for循环中）。即使以1为基数，它也走得太远（4个可用项目中有5个要用）
在setTimeout中，您正在使用for(const value of arr)打印整个阵列。您可能试图将i作为索引来仅索引一个元素。

请记住这些注释，下面是更改了这些部分的工作代码：

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

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

For循环暂停，但一次全部打印出数组

3 个答案: