为什么我的所有信件都在一秒钟后打印出来？答案

【问题标题】：Why all my letters getting printed after just one second?为什么我的所有信件都在一秒钟后打印出来？
【发布时间】：2022-12-15 14:16:56
【问题描述】：

let data = document.querySelector(".data");
let arr = ["Hello", "Random", "Word"];

for (let i = 0; i < arr.length; i++) {
    for (let k = 0; k < arr[i].length; k++) {
      setTimeout(() => {
        console.log(arr[i][k]);
      }, 1000);
}
}

我想要的是先打印 H，然后在第二个 E 之后，然后在 sec L 之后，然后在 sec L 之后，依此类推。但是我所有的信件都被单独打印出来

“H”

“电子”

“我”

一秒钟后全部在一起，而不是一个接一个。

第二个 for 循环不应该等待一秒钟然后打印它们吗？

【问题讨论】：

您正在调用 15 个一秒超时，但您是同时调用它们。
因为所有的超时实际上都是在同一时间开始的，然后它们都会同时被触发。
您的循环在 10 毫秒内结束。所以你几乎是在瞬间添加 1s 超时。请改用1000 * (i+k)
@RobbyCornelissen 我刚刚意识到 setTimeout 是异步的。我怎样才能得到想要的效果？
@phuzi 刚刚意识到 setTimeout 是异步的。我怎样才能得到想要的效果？

标签： javascript

【解决方案1】：

因为 for 循环是立即安排的，所以每次执行之间存在微秒差异。

为了让它以一定的延迟执行，您可以使用 for 循环中的索引进行一些数学运算：

for (let i = 0; i < arr.length; i++) {
    for (let k = 0; k < arr[i].length; k++) {
      setTimeout(() => { console.log(arr[i][k]);}, 1000 + (1000*i) + (100*k));
    }
}

或者使用async / await 来等待单词的打印：

function printDelayed(letter, delayMS) {
  return new Promise(res => { 
    setTimeout(() => { console.log(letter); res(); }, delayMS)
  })
}


async function main() {
  for (let i = 0; i < arr.length; i++) {
      for (let k = 0; k < arr[i].length; k++) {
        await printDelayed(arr[i][k], 100)
      }
  }
}

main().then().catch()

【讨论】：

有用，谢谢。