使用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 循环更新整个数组的颜色时，出现 'cannot read property style of undefined' 错误。早些时候，我使用 document.getElementsbyClassName 访问 div 条，但在阅读了几篇文章后，从我目前收集到的信息来看，最好使用 refs，因为如果 document.getElementsbyClassName 会给出错误我们尝试在创建元素之前访问 DOM。

# 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 但我仍然不太习惯使用 promises。关于可能出问题的任何建议？非常感谢任何帮助！

Answer 1

如果你想一个一个做，你必须像这样增加定时器：

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

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

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

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

在您的代码中，所有超时都在循环结束后执行，因此 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)
}

使用setTimeout暂停执行添加动画

Using setTimeout to pause execution to add animations

javascript

sorting

visualizer

settimeout

reactjs