使用setTimeout暂停执行以添加动画

Question

我是react js的初学者，在函数中操作DOM元素时遇到了困难
我正在尝试使用react构建一个排序可视化工具。为此，我有一个div，它由一个使用map函数的数组组成：

{array.map((value, index) => (
<div>
<div 
className="bar" 
key={index} 
ref = {(value) => this.arrayRef[index] = value}
style={{height: `${value}px`}}></div>
</div>
))}

正如你所看到的，我已经创建了一个ref，这样我就可以使用来动画转换

this.arrayRef[i].style.backgroundColor = 'blue'

现在，当我使用for循环更新整个数组的颜色时，我会收到一个错误，说"无法读取未定义的属性样式"。早些时候，我使用document.getElementsbyClassName访问div栏，但在阅读了几篇文章后，从我目前收集到的信息来看，最好使用refs，因为如果我们试图在创建元素之前访问DOM，document.getElementsbyClassName会出错。

# this is what i meant 
for(i=0;i<this.arrayRef.length;i++){
setTimeout(()=>{
this.arrayRef[i].style.backgroundColor = 'red';
}, 500)
}

我认为这里的问题可能是setTimeout，因为如果我省略了setTimeout部分，整个数组的颜色会根据需要发生变化。但我想以某种方式显示动画，所以我希望它在为整个数组的每个元素着色之前暂停一点，而不是只更改颜色而不进行任何暂停。为此，我认为setTimeout将是最好的选择，我尝试使用async/await，但我仍然不完全适应使用promise。有什么可能出错的建议吗？非常感谢您的帮助！

Answer 1

如果你想一个接一个地完成，你必须像这样增加计时器：

for(i=0;i<this.arrayRef.length;i++){
setTimeout(()=>{
this.arrayRef[i].style.backgroundColor = 'red';
}, 500 * i)
}

setTimeout是异步的，它不会阻止执行。

UP：为了将实际的i保持在setTimeout内，您必须将其设置为参数：

for(i=0;i< 10;i++){
setTimeout(i=>{
console.log(i);
}, 500 * i, i)
}

在您的代码中，所有执行AFTER循环的超时都结束了，因此i包含array.length值：

for(i=0;i< 10;i++){
setTimeout(()=>{
console.log(i);
}, 500 * i)
}

也可以使用let来防止丢失计数器：

for(let i=0;i< 10;i++){
setTimeout(()=>{
console.log(i);
}, 500 * i)
}