使用自定义延迟的JavaScript在循环中动态更改包装器背景

Question

我想在不定式循环中更改页面背景，并在JavaScript的帮助下在每次更改之间进行自定义延迟。我遇到了几个问题：

当我首先不循环测试时，出于某种原因，这两个功能同时启动：

setTimeout(myFunction_1, 3000);
setTimeout(myFunction_2, 3000);
function myFunction_1(){                
document.getElementById("wrapper").style.background = "green";
console.log("test 1");
}
function myFunction_2(){                
document.getElementById("wrapper").style.background = "yellow";
console.log("test 2");
}

当我添加循环时：

while (1 == 1){
setTimeout(myFunction_1, 3000);
setTimeout(myFunction_2, 3000);
}

它崩溃了浏览器...

如何使用自定义时间间隔在不崩溃的情况下更改背景？

Answer 1

看来，您对JS事物并不熟悉，您最好先潜入其中。

您应该更改以下代码：

myFunction_1();
function myFunction_1(){                
    document.getElementById("wrapper").style.background = "green";
    console.log("test 1");
    setTimeout(function(){
        myFunction_2();
    },3000);
}
function myFunction_2(){                
    document.getElementById("wrapper").style.background = "yellow";
    console.log("test 2");
    setTimeout(function(){
        myFunction_3();
    },3000);
}
function myFunction_3(){                
    document.getElementById("wrapper").style.background = "blue";
    console.log("test 3");
    setTimeout(function(){
        myFunction_1();
    },3000);
}