为什么不能显示橙色？

Question

当我每秒更改div元素的背景颜色时，橙色无法显示。

我做错了什么？

var allDiv = document.getElementsByTagName("div"),
    color = ["red", "blue", "yellow", "orange"];

function changeColor(){
  for(var i = 0; i < color.length; i++){
    (function(j){
      setTimeout(function(){
        allDiv[0].style.background = color[j];
        if(j === color.length - 1){
          changeColor();
        }
      }, 1000 * j);
    })(i);
  }
}
changeColor();

div {
    width: 5rem;
    height: 3rem;
}

<div>
</div>

Answer 1

问题在于setTimeout中的间隔。橙色可能正在设置，但随后会因为对changeColor的新调用而立即更改 - 在第一次迭代中，setTimeout的间隔为1000*j = 0。

相反，您可以将其设为1000*(j+1)：

setTimeout(function() {
   ...
}, 1000* (j+1));