Javascript 快速更改css属性值？

我有示例代码：

<div></div>
<button>
Go
</button>

div {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
$('button').click(function() {
    for (var i = 0; i < bgs.length; i++) {
    $('div').css('background-color', bgs[i]);
  }
});

去
div{
宽度：50px；
高度：50px；
边框：1px实心#ccc；
}
var bgs=[“红色”、“蓝色”、“黄色”、“绿色”、“黑色”]；
$（“按钮”）。单击（函数（）{
对于（变量i=0；i

我想要实现的是，当用户单击Go按钮时，用户将能够看到背景从红色、蓝色、黄色、绿色到黑色的快速变化。 但当点击Go按钮时，我得到的只是黑色。

---

我遗漏了什么吗？

您需要设置一些超时来查看颜色的变化，否则会发生得太快

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
$('button').click(function() {
    for (var i = 0; i < bgs.length; i++) {
    setTimeout(function(){
      $('div').css('background-color','').css('background-color', bgs[i]);
    }, 1000);
  }
});

var bgs=[“红色”、“蓝色”、“黄色”、“绿色”、“黑色”]；
$（“按钮”）。单击（函数（）{
对于（变量i=0；i

您可以使用

setInterval（）

在某个时间段（例如0.3秒）更改颜色，否则颜色会随代码立即更改。当它到达数组的最后一个元素时，您可以

clearInterval（）

并重置计数器

i

var bgs=[“红色”、“蓝色”、“黄色”、“绿色”、“黑色”]；
var i=0；
$（“按钮”）。单击（函数（）{
var x=setInterval（函数（）{
如果（i
div{
宽度：50px；
高度：50px；
边框：1px实心#ccc；
}

去
每次单击事件都以黑色结束。所以它变黑了！！！。如果您将其与浏览器渲染进行比较，以便其他颜色不会被渲染，则表示速度太快。
使用不同颜色的偏移量尝试setTimeout（）函数此版本不处理“setTimeout”和“setInterval”


var bgs=[“红色”、“蓝色”、“黄色”、“绿色”、“黑色”]；
函数*getBgs（）{
对于（让v为bgs）{
产量v；
}
}
$（“按钮”）。单击（函数（）{
设iter=getBgs（）；
设$div=$（'div'）；
无功延迟=150；
var-prev=0；
（函数nextColor（）{
requestAnimationFrame（函数（t）{
如果（上一个和下一个-上一个<延迟）{
返回nextColor（）；
}
prev=t；
设next=iter.next（）；
如果（下一步完成）返回；
$div.css（'background-color'，next.value）；
nextColor（）；
});
})();
});
div{
宽度：50px；
高度：50px；
边框：1px实心#ccc；
}

去