Question

我有3个div：div0（绿色），div1（黄色），div2（红色）。所有这些都相互重叠。我使用setInterval隐藏并在每秒后显示div1和div2。如果index = 4或6，我显示红色div除了黄色div。我的下面代码发生的很好。

我的要求是，当index变为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>

Answer 1

当它为8时，清除间隔并使用setTimeout设置为一分钟来调用显示绿色的代码

Answer 2

使用命名函数而不是匿名函数。主要想法是：

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

P.S。：如果您使用jQuery（我从您的脚本标签和帖子的标签列表中理解），您可以使用其Timer plugin

timer = $.timer(function() {
// your code
}, 1000, true);

您可以使用timer.pause()暂停计时器，然后使用timer.play()恢复计时器。

Answer 3

首先，使用带有名称的函数有助于以更好的方式使用它们，并使您的代码易于阅读。这是我改变的代码。 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

Answer 4

在你们所有人的帮助下，我完成了我的要求。非常感谢大家。我发布了我的完整代码。

<!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一段时间？

4 个答案: