JavaScript 带数组的 SetInterval() 函数

Question

let k = 0;
function change() {
    let doc = document.body;
    let color = ["black", "blue", "brown", "green"];
    doc.style.backgroundColor = color[k];
    k++;
    if (k == color.length) {
        k = 0;
    }
}
setInterval(change, 1000);

**我写**

function change2() {
 let doc = document.body;
 let color = ["black", "blue", "brown", "green"];
 for (let r=0; r<color.length; r++){
     doc.style.backgroundColor = color[r];
 }
}
setInterval(change2, 1000);

第一个功能有效，但第二个功能无效。我不明白这个逻辑。请解释一下，基本逻辑。请注意--我是新人JavaScript!

Answer 1

用r改变k

function change2() {
    let doc = document.body;
    let color = ["black", "blue", "brown", "green"];
    for (let r=0; r<color.length; r++){
        doc.style.backgroundColor = color[r];
    }
}
setInterval(change2, 1000);

Answer 2

您想一次切换一个背景颜色，但 change2 函数从不递增 k，因此它只会将背景更改为第一种颜色。此外，循环是不必要的，因为您只想每秒更改一次颜色。

即使您将其更改为使用 k 作为循环变量，当您应该切换到下一个颜色时，您也在所有颜色之间切换。

Answer 3

是因为r和k的范围。在您的第一个示例中，您在函数更改之外声明了 k，并且 re-assigning every-time 您的更改函数被调用并在特定条件下将其重置。在第二个示例中，声明了 r 并且 re-assigned 都在同一个函数调用中。

因此，显然在第二个示例中 body 颜色非常非常快地从黑色变为绿色，并且每秒都在发生。

JavaScript 带数组的 SetInterval() 函数

JavaScript SetInterval() function with arrays

javascript

arrays

background

setinterval