如何在此代码上插入setTimeout和setInterval

Question

是否可以在此代码中插入setTimeout和setInterval？我试图让背景颜色从红色变为蓝色，并在三秒钟后停止。在此先感谢您的帮助！

<Script>

var flag = true;

function changeColor () {

    if(flag==true) {
        document.getElementById("yourId").style.background="red";
        flag=false;
    }

    else if (flag==false) {
        document.getElementById("yourId").style.background="#235CDB";
        flag = true;
    }
}


setInterval(

function changeColor () {

    if(flag==true) {
        document.getElementById("yourId").style.background="red";
        flag=false;
    }
    else if (flag==false){
        document.getElementById("yourId").style.background="#235CDB";
        flag = true;
    }
}, 400);// -->

</SCRIPT>

Answer 1

使用setTimeout功能，

var flag = true;
for (var time = 400; time<=3000; time+=400){
    (function(time){
        setTimeout(changeColor,time);
    })(time);
}

function changeColor () {

    if(flag==true) {
        document.getElementById("yourId").style.background="red";
        flag=false;
    }
    else if (flag==false){
        document.getElementById("yourId").style.background="#235CDB";
        flag = true;
    }
}

---

使用setInterval函数，

你可以保留另一个变量来跟踪时间，并在总时间超过3000毫秒时清除间隔。

var flag = true;
var time = 0;

var interval = setInterval(changeColor,400);

function changeColor () {

    if(flag==true) {
        document.getElementById("yourId").style.background="red";
        flag=false;
    }
    else if (flag==false){
        document.getElementById("yourId").style.background="#235CDB";
        flag = true;
    }
    time += 400;
    if (time >= 3000){
       clearInterval(interval);
    }
}

---

注意：其中任何一个都不会在3秒后停止，因为3000不能被400分割。