如何在javascript中暂停setInterval一段时间
How to pause setInterval for certain time in javascript?
我有 3 个div:div0(绿色)、div1(黄色)、div2(红色)。所有这些都是相互重叠的。我正在使用 setInterval 在每秒后隐藏和显示div1 和div2。如果索引 = 4 或 6,我显示红色div 否则黄色div。它通过我的以下代码发生得很好。
我的要求是,当索引变为 8 时,我想暂停 setInterval 1 分钟,直到显示div0(绿色),然后恢复 setInterval 的循环,直到调用 clearInterval。
如何在此处暂停 setInterval 并显示绿色掩码?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Application</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var index=0;
$(document).ready(function(){
hideDiv();
var auto_refresh = setInterval(function() {
index+=1;
//if(index = 8)
//{
//code to pause the setInterval for 60 seconds and show div0
//}
if(index == 4 || index==6)
{
showDiv2();
}
else
{
showDiv1();
}
if (index > 9)
{
clearInterval(auto_refresh);
}
}, 1000);
});
function hideDiv()
{
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
}
function showDiv0()
{
document.getElementById("div0").style.visibility="visible";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
}
function showDiv1()
{
document.getElementById("div1").style.visibility="visible";
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
document.getElementById("div1").innerHTML=index;
}
function showDiv2()
{
document.getElementById("div2").style.visibility="visible";
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").innerHTML=index;
}
</script>
</head>
<body>
<div id="container" style="position:relative;">
<div id="div0" style="background:green;height:200px;width:200px;margin:0;position:absolute">Relaxing for a minute</div>
<div id="div1" style="background:yellow;height:200px;width:200px;margin:0;position:absolute">This is div1</div>
<div id="div2" style="background:red;height:200px;width:200px;margin:0;position:absolute">This is div2</div>
</div>
</body>
</html>
当它为 8 时,清除间隔并使用设置为一分钟的 setTimeout 调用显示绿色的代码
使用命名函数而不是匿名函数。主要思想是:
if(index == 8) // Be carefull - you have index = 8 in your code snippet now
{
clearInterval(auto_refresh);
// Do your stuff with divs
auto_refresh = setInterval(yourFunctionName, 6000);
}
PS:另外,如果您使用jQuery(正如我从您的脚本标签和帖子的标签列表中了解到的那样),您可以使用其计时器插件
timer = $.timer(function() {
// your code
}, 1000, true);
您可以使用timer.pause()
暂停计时器,并使用 timer.play()
恢复计时器。
首先,使用带有名称的函数有助于更好地使用它们,并使代码易于阅读。这是我更改的代码。HTML 代码和div 隐藏函数是相同的。
使用变量轻松自定义脚本
var index = 0;
var paused = false;
var auto_refresh;
var pauseTimer;
var timeWaiting = 5000; //Set to 5 seconds. Set it to one minute
var timeStep = 1000;
隐藏div,然后开始循环。
$(document).ready(function (){
hideDiv();
auto_refresh = setInterval(loop, timeStep);
});
每次使用 timeStep 定义时调用的循环函数
function loop() {
index += 1;
if (index == 4 || index == 6) {
showDiv2();
} else if (index == 8){
clearInterval(auto_refresh);
hideDiv();
//Setting a timeout to wait as defined
pauseTimer = setTimeout(pauseAndPlay, timeWaiting - timeStep);
} else {
showDiv1();
}
if (index > 9) {
clearInterval(auto_refresh);
}
}
函数处理等待时间并再次开始循环。
function pauseAndPlay(){
index = 0; //Only if you want to start over
auto_refresh = setInterval(loop, timeStep);
}
这是工作演示: jsfiddle.net/PwSfh
在你们所有人的帮助下,我能够完成我的要求。非常感谢大家。我正在发布我的完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Application</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var index=0;
var auto_refresh = 0;
$(document).ready(function(){
hideDiv();
auto_refresh = setInterval(function(){myTimer()}, 1000);
});
function myTimer()
{
index+=1;
if(index == 4 || index==6)
{
showDiv2();
}
else if (index == 8)
{
clearInterval(auto_refresh);
showDiv0();
auto_refresh = setInterval(function(){myTimer()}, 5000); //Now run after 5 seconds
}
else if (index > 12)
{
clearInterval(auto_refresh);
}
else
{
showDiv1();
}
}
function hideDiv()
{
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
}
function showDiv0()
{
document.getElementById("div0").style.visibility="visible";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
}
function showDiv1()
{
document.getElementById("div1").style.visibility="visible";
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
document.getElementById("div1").innerHTML=index;
}
function showDiv2()
{
document.getElementById("div2").style.visibility="visible";
document.getElementById("div0").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").innerHTML=index;
}
</script>
</head>
<body>
<div id="container" style="position:relative;">
<div id="div0" style="background:green;height:200px;width:200px;margin:0;position:absolute">Relaxing for 5 seconds</div>
<div id="div1" style="background:yellow;height:200px;width:200px;margin:0;position:absolute">This is div1</div>
<div id="div2" style="background:red;height:200px;width:200px;margin:0;position:absolute">This is div2</div>
</div>
</body>
</html>
相关文章:
- 如何在悬停时暂停setInterval
- 如何在javascript中暂停setInterval一段时间
- 如何向正在运行的setInterval添加暂停/播放功能
- javascript中setInterval循环的周期性暂停
- 暂停setInterval然后继续有问题
- 运行几次setInterval,然后暂停几秒钟
- 我们可以在setInterval函数中自动暂停animate()和resume()吗?
- 使用setInterval暂停并继续
- 暂停和恢复setInterval
- 当视频暂停时停止setInterval (Youtube播放器)
- 如何暂停.setinterval()悬停和.click()的内部内容
- 什么's最简单/最有效的方式暂停setInterval,而数据正在加载?JavaScript / Jquery
- 当页面/浏览器失去焦点时,暂停setInterval
- 暂停正在运行的setInterval函数
- 添加后退,前进,播放/暂停按钮和setInterval()的窗体
- 在尝试暂停setInterval时遇到问题
- 在setInterval()中暂停或延迟数组上的循环
- Javascript setInterval 不需要的暂停
- 暂停和恢复 javascript 中的 setInterval
- 当活动处于暂停状态时,setInterval停止