JavaScript如何实现元素逐次更新而非全部同时更新？

问题根因 #

原有代码每次定时器触发时都会遍历全部span元素批量修改颜色，和你要的逐个修改效果不符。

修复后代码 #

const ancestor = document.getElementById('hello');
const descendents = ancestor.getElementsByTagName('span');
const myColors = ['rgb(146, 168, 209)', 'rgb(136, 176, 75)', 'rgb(247, 202, 201)'];

// 启动单轮span颜色顺序修改
function startColorRound() {
  let currentIdx = 0;
  const totalCount = descendents.length;
  // 修改单个span颜色
  function modifySingle() {
    if (currentIdx >= totalCount) return;
    const targetSpan = descendents[currentIdx];
    targetSpan.style.color = myColors[Math.floor(Math.random() * myColors.length)];
    currentIdx++;
    // 两个相邻span修改的间隔，单位毫秒，可自行调整
    setTimeout(modifySingle, 100);
  }
  modifySingle();
}

// 启动第一轮
startColorRound();
// 每3秒启动新一轮修改，各轮次独立运行互不干扰
setInterval(startColorRound, 3000);

逻辑说明 #

• 每轮修改会单独维护自己的进度索引，依次从span[0]到span[99]修改颜色，不会出现批量修改的情况
• 各轮次的运行完全独立，3秒后新轮次启动时，未完成的旧轮次会继续运行直到所有span修改完成
• 你可以调整modifySingle方法里setTimeout的第二个参数，控制单轮内两个span修改的时间间隔

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