如何实现数组文本每隔2秒依次显示到HTML的div中

你的原代码会一次性把所有文本插入到DOM中，所以没有延迟效果。要实现每2秒显示一个文本，需要逐个插入元素并为每个插入动作设置延迟，下面提供两种简单易懂的实现方式：

方法一：使用forEach + setTimeout #

这种方法适合快速实现，通过索引计算每个元素的延迟时间：

var arrText = [
  "display after 2 seconds", "display after 4 seconds", "display after 6 seconds", "display after 8 seconds",
];
const textList = document.getElementById('text-list');

// 遍历数组，每个元素按顺序延迟显示
arrText.forEach((text, index) => {
  // 第一个元素延迟2秒，第二个4秒，以此类推
  setTimeout(() => {
    const itemDiv = document.createElement('div');
    itemDiv.textContent = text;
    textList.appendChild(itemDiv);
  }, (index + 1) * 2000);
});

说明：

• 用document.createElement创建新div，比拼接HTML字符串更安全，也更符合DOM操作规范
• 延迟时间通过(index + 1) * 2000计算，确保第一个元素在2秒后显示，第二个在4秒后，以此类推
• 你的原代码循环从i=1开始，会跳过数组第一个元素，上面的示例会显示所有元素

方法二：使用async/await（更直观的流程控制） #

这种方法用异步函数让代码逻辑更线性，新手更容易理解执行顺序：

var arrText = [
  "display after 2 seconds", "display after 4 seconds", "display after 6 seconds", "display after 8 seconds",
];
const textList = document.getElementById('text-list');

// 封装一个延迟函数，返回Promise
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 逐个显示文本的异步函数
async function showTextSequentially() {
  for (const text of arrText) {
    await delay(2000); // 等待2秒
    const itemDiv = document.createElement('div');
    itemDiv.textContent = text;
    textList.appendChild(itemDiv);
  }
}

// 启动函数
showTextSequentially();

说明：

• await delay(2000)会暂停函数执行2秒，之后再执行下一个文本的插入
• 这种写法的逻辑和“先等2秒→显示第一个文本→再等2秒→显示第二个”的直观流程完全一致，可读性更高

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