Как задать время действия скрипту без использования JQuery?

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
 <script type="text/javascript">    
   setInterval(changeBgGreen,1000);
   setInterval(changeBgBlue,2000); 
   function changeBgGreen(){   
   document.getElementById('col').style.background = "green";  
   }   
   function changeBgBlue(){   
   document.getElementById('col').style.background = "blue";  
   } 
</script>

var color = ["green", "blue", "red", "orange"];
var el = document.getElementById('col');
var newColor = next(color);
function next(arr) {
    var max = arr.length - 1,
        i = 0;
    return function () {
        i = i < max ? i + 1 : 0;
        return arr[i];
    };
}
setInterval(function () {
    el.style.background = newColor();
}, 10000); //10 sec (1000mc = 1sec)

var color = ["green", "blue", "red", "orange"];
var el = document.getElementById('col');
var newColor = next(color);
var sec = 0;
 
function next(arr) {
  var max = arr.length - 1,
    i = -1;
  return function() {
    i = i < max ? i + 1 : 0;
    return arr[i];
  };
}
(function newBackground() {
  ++sec;
  el.style.background = newColor();
  sec < 10 && setTimeout(newBackground, 1000);
}());