JS中如何使用setTimeout实现div元素逐个生成的效果？

数据老陈

2026-10-5

问题原因

你原代码中的for循环属于同步执行代码，浏览器会等待所有同步代码执行完毕后才会触发DOM重绘，因此会看到所有div一次性渲染完成，无法看到逐个生成的效果
setTimeout放在for循环内部会导致一次性注册num个延迟为1秒的定时器，全部定时器都会在1秒后同时触发generateLights递归调用，最终出现无限重复生成div的bug

正确实现方案

这里提供两种常用实现方式，都可以达到每隔1秒生成一个div的效果：

方案1：递增定时器延迟（保留for循环写法）

利用let的块级作用域特性，给每个定时器设置逐次递增的延迟时间：

function generateLights(num){
  for(let i=1;i<=num;i++){
    // 第1个div立即生成，第2个延迟1秒，第3个延迟2秒，以此类推
    setTimeout(() => {
      document.getElementById('lights-container').innerHTML += `<div id='light${i}' class='lights'>${i}</div>`;
    }, 1000 * (i - 1));
  }
}

方案2：递归实现（逻辑更可控）

用递归替代for循环，每次生成完当前div后再注册下一个的延迟定时器，生成完指定数量自动终止：

// 调用时只需传总数即可，比如generateLights(5)就会生成5个div
function generateLights(num, current = 1){
  if(current > num) return;
  document.getElementById('lights-container').innerHTML += `<div id='light${current}' class='lights'>${current}</div>`;
  // 延迟1秒生成下一个div
  setTimeout(() => generateLights(num, current + 1), 1000);
}

核心规则说明