在 setInterval() 中暂停或延迟数组上的循环

Question

我希望我创建的框的颜色每 0.5 秒更改一次，我已将颜色存储在一个数组中，我希望颜色每 .5 秒更改一次，但它会同时更改。

<style type="text/css">
    #box{
        width: 100px;
        height: 100px;
        background: green;
    }
</style>

</head>

<body>  
    <div id="box"></div>

    <script type="text/javascript">
        var colors = ['red','blue','green','violet','purple'];
        var box = document.getElementById('box');

        setInterval(function(){
            for(var i=0; i < colors.length; i++){
                box.style.backgroundColor=colors[i];
            }   
        }, 300);
    </script>

Answer 1

使用setTimeout()

var colors = ['red', 'blue', 'green', 'violet', 'purple'];
var box = document.getElementById('box');

for (var i = 0; i < colors.length; i++) {
  (function(index) {
    setTimeout(function() {
      console.log(index);
      box.style.backgroundColor = colors[index];
    }, 300 * i);
  })(i)
}

#box {
  width: 100px;
  height: 100px;
  background: green;
}

<div id="box"></div>

Answer 2

您在间隔回调中循环，这意味着它会在每个间隔中遍历所有颜色。

将间隔改为循环，即每个间隔更进一步。示例：

var index = 0;

setInterval(function(){
  box.style.backgroundColor = colors[index];
  index = (index + 1) % colors.length;
},300);

演示：

var colors = ['red','blue','green','violet','purple'];
var box = document.getElementById('box');

var index = 0;

setInterval(function(){
  box.style.backgroundColor = colors[index];
  index = (index + 1) % colors.length;
},300);

#box{
            width: 100px;
            height: 100px;
            background: green;
        }

<div id="box"></div>

注意：要真正获得每 0.5 秒运行一次的间隔，您应该在 setInterval 调用中使用 500 而不是 300。

Answer 3

您在代码中遗漏了两个关键点

半秒是“500 毫秒”。因此，您需要在 setInteval.
当计时器启动时，您需要使用 "next color in the array" 更新背景颜色。

所以你可以尝试这样的事情：

var color = 0;
var colors = ['red','blue','green','violet','purple'];
function nextColor(){
    color ++;
    if (color>=colors.length)
        color = 0;
    return colors[color];
}

setInterval(function(){
    box.style.backgroundColor = nextColor();   
},500);

这将使方框每半秒改变一次颜色并无限循环颜色数组。

Answer 4

根据你是否希望方框在经过所有颜色后继续变化，有多种方法可以解决这个问题：

/*
 Keeps running
*/
var colors = ['red','blue','green','violet','purple'],
    i = 0;

setInterval(function () {
   
  box.style.backgroundColor = colors[i++ % colors.length];
  
}, 500);


/*
 Runs once only
*/
var colorsOnce = colors.slice(),
interval = setInterval(function () {
   
  once.style.backgroundColor = colorsOnce.shift();
  if(!colorsOnce.length) clearInterval(interval);
  
}, 500);

.box{
  width: 100px;
  height: 100px;
  background: green;
}

<div id="box" class="box"></div>
<div id="once" class="box"></div>

注意：尽管有这些示例，但在涉及计时功能的情况下，最佳做法通常是使用上述@AmmarCSE 所述的超时。

在 setInterval() 中暂停或延迟数组上的循环

Pause or Delay a loop on a array in a setInterval()

javascript

setinterval