有一个颜色数组，我想通过 setInterval 无限旋转

Question

所以我有一个包含少量颜色的简单数组和一个将这些颜色添加到正文背景颜色属性的函数。我正在使用 setInterval 来运行通过颜色，但是当它通过数组时它停止了。我希望它继续前进，要么从头开始，要么也可以倒序进行。我该怎么做？

let colors = ['crimson','dodgerblue','gold', 'deeppink'];
const body = document.body;
let index = 0;

function change() {
body.style.backgroundColor = colors[index++];
}

var timer = setInterval(change, 4000);

Answer 1

您必须确保索引到达数组末尾，如果是，请重置它。类似于：

function change() {
  index = index === colors.length - 1 ? 0 : index++;
  body.style.backgroundColor = colors[index];
}

Answer 2

您只需要一点额外的逻辑来检查 index 并在超出数组末尾时将其重置为 0。

最简单的方法是使用%“取模”运算符：

function change() {
  index = (index + 1) % colors.length;
  body.style.backgroundColor = colors[index];
}

Answer 3

let colors = ['green','dodgerblue','gold', 'deeppink'];
const body = document.body;
let index = 0;

function change() {
console.log('going')
body.style.backgroundColor = colors[index++];
if(index == colors.length) {
    index = 0;
  }
}

var timer = setInterval(change, 1000);

我只是添加了一些逻辑，如果索引到达数组末尾，将其重置为零

有一个颜色数组，我想通过 setInterval 无限旋转

have an array with colors that I want to rotate infinitely through setInterval

javascript

infinite

setinterval