for循环中的setTimeout不返回预期结果答案

【问题标题】：setTimeout within for loop doesn't return expected resultfor循环中的setTimeout不返回预期结果
【发布时间】：2020-05-15 10:59:12
【问题描述】：

我的代码是

for(let i =0; i<10; i++) {
  const timer = (i*1000);
  setTimeout(() => console.log(i, timer), timer)
}

**我的代码返回的每个日志与之前的日志仅相差 1 秒。但是，预期是

当i=1时，1s后打印；
在 i=2 2 秒后打印；
i=3 时，3s 后打印

【问题讨论】：

您在描述同一件事两次：“每个日志与前一个日志仅相隔 1s”与“当 i=1 时，在 1s 后打印；在 i=2 时打印 2s 后；在 i= 3、print after 3s"你真的要在第一个完成后启动第二个计时器吗？

标签： javascript for-loop data-structures settimeout

【解决方案1】：

您可以跟踪上次设置的超时时间并在每次迭代时添加：

let timer = 0;
for (let i = 0; i < 10; i++) {
  timer += i * 1000;
  const thisTimer = timer;
  setTimeout(() => console.log(i, thisTimer), timer)
}

一个更易读的选项是await 超时的分辨率：

(async () => {
  for (let i = 0; i < 10; i++) {
    const timer = i * 1000;
    await new Promise(resolve => setTimeout(resolve, timer));
    console.log(i, timer);
  }
})();

您当前的代码不起作用，因为传递给 setTimeout 的 timeout 每次仅递增 1000，因此每个回调运行间隔 1000 毫秒，而不是 1000 然后 2000 然后 3000，等等。

【讨论】：

【解决方案2】：

SetTimeOut() 不会停止代码运行。您基本上同时设置了 3 个超时，分别为 1 秒、2 秒和 3 秒，因此每个超时时间都与前一个时间间隔 1 秒。

如果你想在时间延迟的情况下一个接一个地执行console.log，你可以使用递归函数：

function timerLog(start, end) {
    const timer = (start * 1000);
    if (start == end + 1) {
        return;
    }
    setTimeout(() => {
        console.log(start, timer);
        timerLog(start + 1, end);
    }, timer);
}
//
timerLog(1, 3);

【讨论】：