[英]Creating a loop for setTimeout
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);``
} }
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. 尽管您可能只想使用
setInterval
设置间隔并不断循环直到某个将来的事件, setInterval
更有可能。 Like 喜欢
stop
button stop
按钮 you can use setInterval which recalls the function in question every interval until canceled. 您可以使用setInterval,它会在每个时间间隔内取消有问题的函数,直到被取消为止。
var myVar = setInterval(function(){
theBody.className = (theBody.className == "white")? "red" : "white";
}, 250);
To stop the execution all you have to do is : 要停止执行,您需要做的是:
clearInterval(myVar);
You can use setInterval
to do something at intervals and you can use clearInterval
to clear that interval (to make it stop). 您可以使用
setInterval
定期执行一些操作,也可以使用clearInterval
清除该间隔(使其停止)。
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
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.