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

如何解决使用setTimeout暂停执行以添加动画

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

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

如您所见，我创建了一个参考，以便可以使用以下方法为过渡设置动画：

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

现在，当我使用for循环更新整个数组的颜色时，出现一个错误，提示“无法读取未定义的属性样式”。之前我使用document.getElementsbyClassName访问div栏，但阅读了几篇文章后，到目前为止，我收集到的是使用refs更好，因为如果我们尝试在访问DOM之前访问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仍然不满意。关于可能出什么问题的任何建议？任何帮助深表感谢！

解决方法

如果要一个接一个地执行此操作，则必须像这样增加计时器：

from collections import Counter
from itertools import combinations,chain

text = ['Lion Monkey Elephant Weed','Tiger Elephant Lion Water Grass','Lion Weed Markov Elephant Monkey Fine','Guard Elephant Weed Fortune Wolf']


def count_combinations(text,n_words,n_most_common=None):
    count = []
    for t in text:
        words = t.split()
        combos = combinations(words,n_words)
        count.append([" & ".join(sorted(c)) for c in combos])
    return dict(Counter(sorted(list(chain(*count)))).most_common(n_most_common))

count_combinations(text,2)

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

UP：要在setTimeout中保留实际的for(i=0;i<this.arrayRef.length;i++){ setTimeout(()=>{ this.arrayRef[i].style.backgroundColor = 'red'; },500 * i) } ，必须将其设置为参数：

i

在您的代码中，所有的超时都在AFTER循环之后执行，因此for(i=0;i< 10;i++){ setTimeout(i=>{ console.log(i); },500 * i,i) }包含array.length值：

i

您还可以使用let防止计数器丢失：

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