Creating a loop for setTimeout

Question

I have this code which works fine, for creating a flashing affect at the end of a timer, however Im sure this could be done more easily using a loop. Can anyone show me that loop please as I cant figure it out, thanks in advance.

function stopTimer() {
clearTimeout(timerID);
timerID = null;
timerObj.value = save;

var theBody = document.getElementById("theBody");
setTimeout(function () { theBody.className = "white"; }, 0);
setTimeout(function () { theBody.className = "red"; }, 250);
setTimeout(function () { theBody.className = "white"; }, 500);
setTimeout(function () { theBody.className = "red"; }, 750);
setTimeout(function () { theBody.className = "white"; }, 1000);
setTimeout(function () { theBody.className = "red"; }, 1250);
setTimeout(function () { theBody.className = "white"; }, 1500);
setTimeout(function () { theBody.className = "red"; }, 1750);
setTimeout(function () { theBody.className = "white"; }, 2000);
setTimeout(function () { theBody.className = "white"; }, 2250);
setTimeout(function () { theBody.className = "red"; }, 2500);
setTimeout(function () { theBody.className = "white"; }, 2750);
setTimeout(function () { theBody.className = "red"; }, 3000);
setTimeout(function () { theBody.className = "white"; }, 3250);
setTimeout(function () { theBody.className = "red"; }, 3500);
setTimeout(function () { theBody.className = "white"; }, 3750);
setTimeout(function () { theBody.className = "red"; }, 4000);
setTimeout(function () { theBody.className = "white"; }, 4250);

var audio = document.createElement("audio");
audio.src = "alarm.mp3";
theBody.appendChild(audio);

audio.setAttribute("id", "audio");
audio.play();
setTimeout(function () {
    audio.pause();
}, 6000);``

}

Mulan · Accepted Answer · 2015-12-09 23:43:45Z

2

Here's a quick/dirty way to do it

function white() { theBody.className = "white"; }
function red()   { theBody.className = "red"; }

for (var i=0; i<=4250; i+=500) {
  setTimeout(white, i);
  setTimeout(red, i+250);
}

More likely though you would just want to set an interval using setInterval and continuously loop until some future event. Like

loop for 5 seconds,
or, loop until user clicks stop button
or, some other condition

answered Dec 9, 2015 at 23:43

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony N. · Accepted Answer · 2015-12-09 23:43:31Z

1

you can use setInterval which recalls the function in question every interval until canceled.

var myVar = setInterval(function(){ 
  theBody.className = (theBody.className == "white")? "red" : "white";
}, 250);

To stop the execution all you have to do is :

 clearInterval(myVar);

answered Dec 9, 2015 at 23:43

Anthony N.

3951 gold badge3 silver badges18 bronze badges

Comments

Victory · Accepted Answer · 2015-12-09 23:46:34Z

0

You can use setInterval to do something at intervals and you can use clearInterval to clear that interval (to make it stop).

var theBody = document.getElementById("theBody");
var max = 10;
var effect = setInterval(function () {
    theBody.className =  (max % 2 == 0) ? "white" : "red";
    max--;
    if (max == 0) {
        clearInterval(effect);
    }
}, 
250 // how often to do this in milliseconds
);

see fiddle

answered Dec 9, 2015 at 23:46

Victory

5,9113 gold badges28 silver badges47 bronze badges

Collectives™ on Stack Overflow

Creating a loop for setTimeout

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related