在for循环中的setTimeout没有返回预期的结果。

Question

我的代码是

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

**我的代码返回的每条日志与之前的日志只相差1s。但是，预期是

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

**

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

你现在的代码不能用，因为... timeout 传给 setTimeout 每次只递增1000，所以每次回调运行间隔1000毫秒，而不是1000然后2000然后3000，等等。

Answer 2

SetTimeOut() 并不会停止代码的运行。你基本上同时设置了3个超时，分别是1s，2s，3s，所以每个超时与前一个超时相隔1s。

如果你想执行 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);