在Javascript中是否有一种方法可以逐步更新元素，而不是同时更新所有元素

Question

假设我有一个包含100个span元素的html网格，我想逐渐改变这些span的颜色，从span[0]到span[100]。我下面的代码改变了span元素的颜色，但都在一次命中，然后再过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);

Answer 1

下面的代码可以使用一些改进和语法糖来更小，但我认为这是您正在寻找的。在这个代码片段中，我只创建了10个跨度，并将间隔设置为250米，以便于测试。它要做的是从span 1开始，一直到span 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>