changeColorsOnTimeout-Simple.html

<!DOCTYPE html>
<html>
<head>
    <title>TMP</title>
</head>
<body>

    <script type="text/javascript">
        function changeBodyBG(color){
            document.body.style.backgroundColor = color;
        }

        function setNextColor(){
            console.log(i)
            changeBodyBG(colors[i]);

            // change index (you can do it with '%' as well)
            if(i < colors.length-1){
                i++
            }else{
                i = 0
            }
        }

        var colors = ["red", "green", "blue"];
        var i = 0;
        period = 1000

        for (var j = 0; j < colors.length; j++){
            // TASK: why we do not pass j as argument to setNextColor?
            setTimeout( setNextColor, period )
            period+=1000
        }
    </script>
</body>
</html>