JavaScript foreach循环遍历十六进制值数组，使用setTimeout循环遍历背景颜色

Question

I've been trying to come up with the most concise way that I can possibly change background colors using JavaScript. (Trying to get the hang of forEach and higher order functions just for fun.) Anyway, this will run on page load, and I think I'm pretty close:

function background(){
    var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];
    function change(newcolor){
        document.body.style.backgroundColor=newcolor;
    }
    colorArray.forEach(function(color){
        setTimeout(change(color), 1000);
    });
}

The problem is that the background color is only showing the last element in the array. I also am not sure how to start the forEach loop over again when it is has finished. Thanks for any help!

Answer 1

Like this ... Also can ...

var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

var count = 0;

    function change() {
        document.body.style.backgroundColor = colorArray[count];
        count++;
        if(count == colorArray.length) {
            count = 0;
        }
    }

    setInterval(function(){
        change();
    }, 1000);

Answer 2

The problem is you are passing the value returned by change as the timeout handler, instead you need to pass a function reference.

If you want to have an infinite loop, then you can use setInterval() like

 function background() { var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"]; function change() { index = index >= colorArray.length ? 0 : index; document.body.style.backgroundColor = colorArray[index++]; } var index = 0; var interval = setInterval(change, 1000); } background(); 

---

If you want to use setTimeout() itself and want to iterate only once then you can use

 function background() { var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"]; function change(newcolor) { document.body.style.backgroundColor = newcolor; } colorArray.forEach(function(color, i) { setTimeout(change.bind(undefined, color), i * 1000); }); } background(); 

Answer 3

Improving ....

var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

 var count = 0;

setInterval(function(){
    document.body.style.backgroundColor = colorArray[count];
    count++;
    if(count == colorArray.length) {
        count = 0;
    }
}, 1000);