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

Question

Is it possible to insert setTimeout and setInterval on this code? I'm trying to make the background color change fro red to blue and will stop in three seconds. Thanks in advance for your help!

<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

With setTimeout function,

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;
    }
}

---

with setInterval function,

You can keep another variable to keep a track of tatal time, and clear the interval when total time exceeds 3000 milliseconds..

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);
    }
}

---

Note: either of these won't stop after exactly 3 seconds because 3000 cannot be divided by 400.