Javascript中有没有办法逐渐更新元素而不是同时更新答案

【问题标题】：Is there a way in Javascript to gradually update elements and not update all at the same timeJavascript中有没有办法逐渐更新元素而不是同时更新
【发布时间】：2021-11-13 00:21:27
【问题描述】：

假设我有一个包含 100 个跨度元素的 html 网格，我想逐渐将这些跨度的颜色从跨度 [0] 更改为跨度 [100]。我下面的代码更改了跨度元素的颜色，但一次完成，然后在 3 秒后再次更改，但没有执行我想要的操作。理想情况下，我希望它逐渐改变颜色，然后在 3 秒后再次开始改变颜色，而第一个功能不断改变到 span[100]

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

function myLoop(count) {
  setTimeout(function() {
    for (i = 0; i < descendents.length; ++i) {
      e = descendents[i];
      c = e.style.color;
      //pick color
      e.style.color = myColors[Math.floor(Math.random() * myColors.length)];
    }
    count++;
    if (count < descendents.length) {
      myLoop(count);
    }
  }, 3000);
}
myLoop(count);

【问题讨论】：

能否在jsfiddle或codepen中提供HTML代码？

标签： javascript html loops for-loop delay

【解决方案1】：

下面的代码可以使用一些改进和更小的语法糖，但我认为这就是您要寻找的。在这个 sn-p 中，我只创建了 10 个跨度并将间隔设置为 250m，以便于测试。它将做的是从跨度 1 开始，直到 10 将颜色更改为myColors 数组中的第一个颜色。完成后，会从第二种颜色重新开始，以此类推。

在您的代码中，您使用了setTimeout，它将在 3 秒后运行一次，然后不再运行。我认为您正在寻找 setInterval，它将创建一个每 X 毫秒运行一次的循环。

const myColors = ['rgb(146, 168, 209)', 'rgb(136, 176, 75)', 'rgb(247, 202, 201)'];
let index = 0;
let loops = 0;

function generateSpans(){
  const ancestor = document.getElementById("ancestor");
  for(let i = 0; i<10; i++){
    const span = document.createElement("span");
    span.innerText = i;
    ancestor.appendChild(span);
  }
}

function blinkElements(){
  const elements = document.getElementsByTagName("span");
  setInterval(function(){
    if(index === elements.length){
      index = 0;
      if(loops === myColors.length-1){
        loops = 0;
      }else{
        loops++;
      }
    }
    elements[index].style.backgroundColor = myColors[loops];
    index++;
  }, 250);
}


document.addEventListener("DOMContentLoaded", function(event) {
    generateSpans();
    blinkElements();
});

div {
  width: 1000px;
  height: 50px;
}

span {
  background-color: red;
  padding: 10px;
  margin: 10px;
}

<div id="ancestor">
</div>

【讨论】：