在 "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)，只有当它的 "父 "超时(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

因此，没有必要 i * 若是 off-超时。

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