在 `for` 循环中嵌套 `setTimeout`

Question

我在一个阵列中有多个灯泡。我正在尝试一个接一个地打开和关闭灯泡。每个灯泡应打开 1 秒（一个接一个），然后所有灯泡应关闭 2 秒。

但是在下面的代码中，输出的顺序不是预期的。好像里面的setTimeout()没有跟随外面的延迟时间。

var array = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < array.length; i++) {
  setTimeout(function() {
    console.log(i + " is on");
    setTimeout(function() {
      console.log(i + " is off");
    }, i * 1000);
  }, i * 3000);
}

我不必在这里使用 setTimeout()（如果有更好的选择）。

任何想法将不胜感激。

Answer 1

您的嵌套超时 (off) 将仅在其 "parent" 超时 (on) 触发时设置。

这样，您的off-超时时间添加到on-超时时间（i * 3000 + i * 1000）：

0*3000 + 0*1000 =     0
1*3000 + 1*1000 =  4000
2*3000 + 2*1000 =  8000
3*3000 + 3*1000 = 12000
4*3000 + 4*1000 = 16000
5*3000 + 5*1000 = 20000

如果将这些值与 on 超时进行比较，您会得到：

ON  0     0
OFF 0     0
ON  1  3000
OFF 1  4000
ON  2  6000
OFF 2  8000
ON  3  9000
OFF 3 12000
ON  4 12000
ON  5 15000
OFF 4 16000
OFF 5 20000

因此，在 off 超时的情况下不需要 i *。

var array = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < array.length; i++) {
  setTimeout(function() {
    console.log(i + " is on");
    setTimeout(function() {
      console.log(i + " is off");
    }, 1000);
  }, i * 3000);
}

此外，如果可能，最好避免嵌套超时，因为它们会增加延迟。相反，在添加时间的情况下创建它们。

像这样：

var array = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < array.length; i++) {
  setTimeout(function() {
    console.log(i + " is on");
  }, i * 3000);
  setTimeout(function() {
    console.log(i + " is off");
  }, i * 3000 + 1000);
}

在 `for` 循环中嵌套 `setTimeout`

Nested `setTimeout`s in `for` loop

javascript

settimeout