为什么控制台日志之间的时间不会随着 setTimeout 毫秒的增加而在 for 循环中增加？ [复制]答案

【问题标题】：Why isn't time between console logs increasing in for loop with increasing setTimeout milliseconds? [duplicate]为什么控制台日志之间的时间不会随着 setTimeout 毫秒的增加而在 for 循环中增加？ [复制]
【发布时间】：2021-10-17 11:41:01
【问题描述】：

for (var i = 1; i <= 4; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j);
    }, j * 1000);
  })(i);
}

在上面的代码中，我的理解是 for 循环的每次迭代，IIFE 执行前的时间都会增加，因为它将循环中的当前项乘以 1000；它将在执行前 1 秒、2 秒、3 秒和 4 秒。但是当我尝试在 Chrome 开发人员工具控制台中运行它时，打印 1、2、3 和 4 之间的时间似乎并没有增加。打印出来的 3 到 4 之间肯定不是 4 秒。

比较试试运行：

(function (j) {
    setTimeout(function () {
      console.log(j);
    }, j * 1000);
 })(4);

我错过了什么吗？

【问题讨论】：

setTimeout 不会同步等待。这就是为什么延迟乘以索引的原因 — 否则所有回调将同时发生。
相关：How do I add a delay in a JavaScript loop?.
循环仅在几毫秒内完成，因此所有这些延迟都基于循环运行时几乎相同的开始时刻......现在 + 0，现在 +1 秒，现在 + 2 秒等....

标签： javascript

【解决方案1】：

您的 for 循环不会等待超时完成。

第一次迭代setTimeout 等待 1 秒。第二次迭代 2 秒等。这就是为什么 console.logs 相隔 1 秒。

如果您希望 console.log 之间的间隔为 1、2、3 和 4 秒，则需要将超时时间增加 1 到 n 的总和。

   // 1st log at 1 sec.
   //  -> 2 seconds later 
   // 2nd log at 3 sec. (1 + 2) 
   //  -> 3 seconds later
   // 3rd log at 6 sec. (1 + 2 + 3) 
   //  -> 4 seconds later 
   // 4th log at 10 sec. (1 + 2 + 3 + 4)

function sumOfDigits(n) {
   return (n * (n+1)) / 2;
}

for (var i = 1; i <= 4; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j);
    }, sumOfDigits(j) * 1000);
  })(i);
}

【讨论】：

【解决方案2】：

您似乎有一个基本的误解，即循环或 IIFE 每次迭代都会根据 setTimeout 延迟，但事实并非如此

将一些经过时间记录添加到您的场景中，您将意识到 IIFE 会在循环的每次迭代中被调用，没有延迟。因此每个 setTimeout 的开始时间基本相同

let sTime = performance.now();

for (var i = 1; i <= 4; i++) {
  (function (j) {
     const eTime = performance.now()
    console.log(`IIFE i=${i} , elapsed = ${eTime-sTime}`)
    setTimeout(function () {
      const eTime = performance.now() 
      console.log(`Timeout i=${j} , elapsed = ${eTime-sTime}`);
    }, j * 1000);
  })(i);
}

【讨论】：