如何在javascript中暂停setInterval一段时间？答案

【问题标题】：How to pause setInterval for certain time in javascript?如何在javascript中暂停setInterval一段时间？
【发布时间】：2013-10-21 12:10:22
【问题描述】：

我有 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>

【问题讨论】：

如果不使用 jQuery，为什么还要包含它？
清除间隔(clearInterval(timer))，当索引变为8时，启动一分钟定时器重新启动间隔var timer = setTimeout(function(){setInterval(restartTimer, repeatDuration)}, 60*60)
@ahren - 对于 $(document).ready(function(){
@nkp 让 document.ready 变得有点矫枉过正（它只有大约 50 行代码）
如果您没有大量等待加载的图形，这确实有点矫枉过正，也许您应该看看这个问题并考虑一下您是否真的需要 .ready() （您不需要't，在我看来）。

标签： javascript jquery html

【解决方案1】：

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

【讨论】：

【解决方案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() 恢复它。

【讨论】：

虽然所有解决方案都对我有用。但我同意你的方法。感谢您的努力。我接受你的回答。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：