Как совместить setTimeout и цикл for?
 

Здравствуйте, уважаемые форумчане! Есть div, который должен менять фон через каждую секунду. Теперь нужно, используя цикл for при каждом прохождении цикла сделать задержку каждого цвета на одну секунду с помощью setTimeout.
Дело в том, что цикл for выдает только последнее прохождение и не хочет задерживаться на каждом цвете. Поискал ответ в интернете, пришел к такому написанию скрипта:

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
<script type="text/javascript">
var color = ["green", "blue", "red", "orange"];
var el = document.getElementById('col');
var max = color.length-1;

for(var i=0; i<=max; i++) {
(function(i){
setTimeout(function(){
el.style.background = color[i];
}, 1000);
})(i);
}
</script>

Но он тоже почему-то не работает. Подскажите, пожалуйста, как все-таки в моем скрипте совместить for и setTimeout.

Как? Никак.
Цикл выполняется сейчас и только сейчас, таймаут выполняется потом.

Таймаут должен вызывать функцию, которая вызывает следующий таймаут.

vlad35,
как вариант...

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
	<script>
	let color = ["green", "blue", "red", "orange"],
	el = document.querySelector('#col'),
	requests = color.reduce((promiseChain, item) => {
		return promiseChain.then(() => new Promise(resolve => {
		  setTimeout(() => (el.style.background = item) && resolve(), 1000)
		}));
	}, Promise.resolve());	
	</script>

<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>

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

Poznakomlus, годный овермайнд.))

Aetae,
особо не понял зачем ТС эти варианты
http://www.cyberforum.ru/javascript-...ad1830841.html

:)

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
  <script>
  var color = ["green", "blue", "red", "orange"],
  el = document.querySelector('#col');
  (function f() {
   var item = color.shift();
   item && (el.style.background = item) && setTimeout(f, 1000)
  }())
  </script>

рони,
:)

Poznakomlus,
ок. но но зачем усложнять

может стоит задача написания кода с использованием генераторов