Потому что он может.)

Тс хотел for - он получил for.)

Aetae,
как я понимаю решение совмещения for и setTimeout

<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);
 })(i);
 }
 </script>

рони, жесть.))

Спасибо Всем, кто ответил, все прочитал и принял к сведению. Я только несколько дней как взялся изучать JavaScript, поэтому извините за нелепый вопрос.

vlad35, тогда тебе только этот вариант. На остальные не смотри, это просто извращенные развлечения.)

имхо: Тот вариант это рекурсия с созданием замыкания при этом еще долго живущая т.к. ссылка на функцию живет в SetInterval. Интерпретатору приходится каждый раз на вызов создавать контекст(окружение) для исполнения таких функций что просто ужасно для производительности. Тут как раз и нужно использовать чуть ли не единственную полезную фичу из ES6 стрелочные функции которые исполняются в текущем контексте.

что то вроде

<div style="width:300px; height:300px" id="col"></div>
<script>
	var color = [];
	var el = document.querySelector('#col');
	var f=()=> (el.style.background = color.shift()) && setTimeout(f,100);
	
+function(){  // заполняет массив цветов
var i=0,R=G=0,B=15,t=P=>P.toString(16),P=()=>color.push("#"+t(R)+t(G)+t(B));
while(i<16)P(R=i++);while(i>0)P(B=i--);while(i<16)P(G=i++);
while(i>0)P(R=i--);while(i<16)P(B=i++);while(i>0)P(G=i--);}();f()
</script>

Спасибо всем за участие, очень помогли! Я пока новичок в JavaScript, поэтому вопросы могут быть глупыми, извините!

shift удаляет элемент с индексом 0 и сдвигает остальные элементы на один вниз
не совсем красиво то для данной задачи :nono:

Poznakomlus, все остальные варианты тут гораздо более неадекватные, а самому писать было лень.) Тот то хоть представление даёт, и адаптировать можно к любой подобной задаче.