Javascript 函数，使用 setTimeout() 方法在一段时间内更改背景颜色

Question

我需要创建一个函数，该函数每 15 秒更改一次背景颜色，从访问后重新启动的数组中选择颜色。这样我的函数只运行一次，我怎样才能从数组中挑选一个循环？

$(document).ready(() => {
const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
function start(i){
if(i < colors.length){
setTimeout(function(){
$('body').css("backgroundColor", colors[i]);
i++;
start(i);
}, 15000);
}
}
start(0);

Answer 1

您可能需要考虑使用更快，更高效的CSS动画。

body {
background-color: #83ACDE;
animation: changeBackgroundColor 60s infinite;
}
@keyframes changeBackgroundColor {
0%,
24.99%,
100% {
background-color: #83ACDE;
}
25%,
49.99% {
background-color: #EDCA38;
}
50%,
74.99% {
background-color: #A1B2C3;
}
75%,
99.99% {
background-color: #3C2B1A;
}
}

Answer 2

当您超过数组长度时，您需要"重置"您的i变量...

const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
$(function() { start(0); });
function start(i){
setTimeout(function(){
$('body').css("backgroundColor", colors[i]);
i++;
if (i >= colors.length) {
i = 0;
}
start(i);
}, 2000); // Changed to 2 seconds for example
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello World</div>

Answer 3

虽然我也建议简单地重置i，但另一种方法是使用模%，即：

const colors = ['#83ACDE', '#EDCA38', '#A1B2C3', '#3C2B1A'];
function start(i) {
setTimeout(function() {
$('body').css("backgroundColor", colors[i]);
i++;
start(i % colors.length);
}, 500); 
}
start(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example</div>

Answer 4

更简单的是使用数组长度上的模(余数(运算符，如下所示：

start ( (i + 1) % colors.length);

这不仅在i + 1等于colors.length时返回 0 时递增。

const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
function start(i){
setTimeout(function(){
$('body').css("backgroundColor", colors[i]);
start((i + 1) % colors.length);
}, 1000); //1 second here to be easier to see
}
start(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，我还删除了测试i是否为有效索引的if，因为它不再需要。

Answer 5

达到colors长度时重置i：

function start(i){
if(i < colors.length){
setTimeout(function(){
$('body').css("backgroundColor", colors[i]);
i++;
if(i == colors.length) { i=0; }
start(i);
}, 15000);
}
}

Answer 6

你的代码只需要小的修改。

const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
const ColorLength=colors.length;
$(document).ready(() => {   start(0);});
function start(i){
setTimeout(function(){
$('body').css("backgroundColor", colors[i]);
i++;
if (i >= ColorLength) {
i = 0;
}
start(i);
}, 1000); 
}

Answer 7

代码的问题是因为当i值超出colors数组的范围时，if条件结束循环。

您可以通过使用取模运算符将i值除以length或数组并使用余数作为索引来解决此问题。您还可以整理逻辑以立即设置第一个背景颜色。试试这个：

$(document).ready(() => {
const colors = ['#83ACDE', '#EDCA38', '#A1B2C3', '#3C2B1A'];
function start(i) {
$('body').css("backgroundColor", colors[i++ % colors.length]);
setTimeout(function() { start(i); }, 1000);
}
start(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 8

$(document).ready(() => {
const colors = ['#83ACDE', '#EDCA38', '#A1B2C3', '#3C2B1A'];
var index = 0;
function start() {
setTimeout(function() {
if (colors.length == index) {
index = 0;
}
$('body').css("backgroundColor", colors[index++]);
start();
}, 2000);
}
start();
})