[Vlasenko Fedor]

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
<script>
const el = document.getElementById('col');
let iterator = next();
function* next() {
const arr = ["green", "blue", "red", "orange"];
  for (var i = 0; i <= arr.length;) {
    yield arr[i++];
  }
}
  (function newBackground() {
    let color = iterator.next().value;
    if (color) {
      el.style.background = color;
      setTimeout(newBackground, 1000);
    }
  }());
</script>

песочница
но зачем вам это, есть более простые решения данного функционала