javascript - 10秒后没有颜色变化

Question

我有一个 fiddle每一秒后，我都会将背景颜色更改为不同的颜色。

我想知道我需要对 fiddle 中出现的下面的 Javascript 代码进行哪些更改，以便 10 秒后颜色不会发生变化。我使用的 JS 代码是:

var i = 0;

function change() {
  var doc = document.getElementById("background");
  var color = ["black", "blue", "brown", "green", "red", "yellow", "white", "pink", "purple", "orange"];
  doc.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
}
myVar = setInterval(change, 1000);

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100% !important;
}

#background {
  width: 100%;
  height: 100%;
}

<div id="background">
</div>

Answer 1

超时10秒后清除间隔

试试这个:

var i = 0;

function change() {
  var doc = document.getElementById("background");
  var color = ["black", "blue", "brown", "green", "red", "yellow", "white", "pink", "purple", "orange"];
  doc.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
}
myVar = setInterval(change, 1000);
setTimeout(() => {
  clearInterval(myVar);
}, 10000);

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100% !important;
}

#background {
  width: 100%;
  height: 100%;
}

<div id="background">
</div>