如何在JavaScript中將setInterval暫停一定時間？
[英]How to pause setInterval for certain time in javascript?
問題描述
我有3個div：div0（綠色），div1（黃色），div2（紅色）。 所有彼此重疊。 我正在使用setInterval每秒隱藏和顯示div1和div2。 如果index = 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>
4 個解決方案
解決方案1
2 2013-10-21 12:17:04
當它為8時，清除間隔並使用setTimeout設置為一分鍾來調用顯示綠色的代碼
解決方案2
1 已采納 2013-10-21 12:23:08
使用命名函數而不是匿名函數。 主要思想是：
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 = $.timer(function() {
// your code
}, 1000, true);
您可以暫停與定時器timer.pause()並恢復它timer.play()
解決方案3
1 2013-10-21 14:14:00
首先，將函數與名稱一起使用有助於更好地使用它們，並使代碼易於閱讀。 這是我更改的代碼。 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
解決方案4
0
在大家的幫助下，我能夠完成我的要求。 非常感謝大家。 我正在發布我的完整代碼。
<!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>
Javascript，如何在此代碼中停止或暫停setInterval計時器？
[英]Javascript, How to stop or pause the setInterval timer in this code?
在 JavaScript 中使用 setInterval 在特定時間執行代碼塊
[英]Executing a block of code at a certain time with a help of using setInterval in JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.