CODEWITHSUNDEEP
javascriptjqueryhtml
user1556433
user1556433

Reputation:

How to pause setInterval for certain time in javascript?

I have 3 divs: div0 (green), div1 (yellow), div2 (red). All are overlapping each other. I am using setInterval to hide and show div1 and div2 after every second. if index = 4 or 6, I am showing red div else yellow div. Its happening fine by my below code.

My requirement is that, When index becomes 8, I want to pause the setInterval for 1 minute and till then show div0 (green) and afterwards resume the loop of setInterval until clearInterval is called.

How can I pause the setInterval here and show the green mask?

<!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>

Upvotes: 2

Views: 5828

Answers (4)

user1556433
user1556433

Reputation:

With the help of all you guys, I was able to complete my requirement. Thanks a lot everyone. I am posting my full code.

<!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>

Upvotes: 0

CeritT
CeritT

Reputation: 532

First of all, using functions with names helps using them in a better way and makes your code easy to read. Here is the code i changed. HTML codes and div hiding functions are the same.

Use variables to customize your script easily

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;

Hide divs, and start looping.

$(document).ready(function (){
    hideDiv();
    auto_refresh = setInterval(loop, timeStep);
});

Loop function called every time defined with 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 handles the wait time and start looping again.

function pauseAndPlay(){
    index = 0; //Only if you want to start over
    auto_refresh = setInterval(loop, timeStep);
}

Here is the working demo: jsfiddle.net/PwSfh

Upvotes: 1

zavg
zavg

Reputation: 11061

Use named function instead of anonymous. The main idea is:

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.: Also if you use jQuery (as I understand from your script tag and post's tag list) you can use its Timer plugin

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

You can pause the timer with timer.pause() and resume it with timer.play().

Upvotes: 1

epascarello
epascarello

Reputation: 207501

when it is 8, clear the interval and use a setTimeout set to a minute to call the code that shows the green

Upvotes: 2

Related Questions