如何实现数组中每个元素间隔5秒依次输出？

当然可以实现啦！你的原代码问题在于把整个循环都塞进了一个setTimeout里，所以5秒后会一次性把所有元素都输出。要实现每个元素间隔5秒依次输出，有两种常用的方法，我给你详细说说：

方法1：利用forEach和索引计算延迟 #

我们可以给数组里的每个元素单独设置一个setTimeout，通过元素的索引来计算不同的延迟时间，这样每个元素的输出时间就会相差5秒：

const array = [ "aplus", "ant", "bean", "cookie", "corncob", "corndog", "potato", "skunk", "rabbit", "duck", "deer", "boar", "dragon", "seaweed", "fish", "rarefish", "exoticfish", "jellyfish", "legendaryfish", "kraken", "junk", "garbage", "trash", "worm", "ladybug", "stickbuy", "spider", "banhammer", "musicalnote", "energydrink", "memepills", "lawdegree", "vaccine", "beakerofsusfluid", "ectoplasm" ];

array.forEach((item, index) => {
  setTimeout(() => {
    console.log(item);
  }, index * 5000); // 第1个元素延迟0秒（立即输出），第2个延迟5秒，第3个10秒...以此类推
});

如果希望第一个元素也先等5秒再输出，只需要把延迟时间改成(index + 1) * 5000就行，这样第一个元素在5秒时输出，第二个10秒，以此类推。

方法2：用async/await实现串行延迟 #

这种方法的代码逻辑更直观，就像“等5秒→输出元素→再等5秒→输出下一个”，可读性更强：

const array = [ "aplus", "ant", "bean", "cookie", "corncob", "corndog", "potato", "skunk", "rabbit", "duck", "deer", "boar", "dragon", "seaweed", "fish", "rarefish", "exoticfish", "jellyfish", "legendaryfish", "kraken", "junk", "garbage", "trash", "worm", "ladybug", "stickbuy", "spider", "banhammer", "musicalnote", "energydrink", "memepills", "lawdegree", "vaccine", "beakerofsusfluid", "ectoplasm" ];

// 先封装一个返回Promise的延迟函数
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

// 用async函数实现依次输出
async function printItems() {
  for (const item of array) {
    await delay(5000); // 等待5秒
    console.log(item); // 输出当前元素
  }
}

// 调用函数开始执行
printItems();

两种方法的区别 #

• 方法1是并行安排所有延迟任务：代码执行时会一次性把所有setTimeout都注册好，每个任务的执行时间是提前计算好的，互不影响。
• 方法2是串行执行延迟任务：必须等上一个元素输出完成（也就是延迟结束），才会开始下一个元素的延迟和输出，适合有顺序依赖的场景。

内容的提问来源于stack exchange，提问作者xHaruke