Javascript: Start/Stop/Pause Button for setInterval() - Overclock.net - An Overclocking Community

Forum Jump: 

Javascript: Start/Stop/Pause Button for setInterval()

Reply
 
Thread Tools
post #1 of 17 (permalink) Old 01-27-2013, 09:55 PM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
Is there a way to make a set of buttons like those for the setInterval function? Specifically that doesn't call to a outside source like jQuery.


Zen00 is offline  
Sponsored Links
Advertisement
 
post #2 of 17 (permalink) Old 01-28-2013, 12:56 PM
New to Overclock.net
 
tom.slick's Avatar
 
Join Date: May 2009
Location: Orange County
Posts: 1,012
Rep: 158 (Unique: 128)
You can not pause setInterval() but you can stop it with clearInterval() and then restart it


tom.slick is offline  
post #3 of 17 (permalink) Old 01-28-2013, 02:38 PM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
Can I instead of pausing setInterval() change the interval variable to a unreasonably long time period which emulates a pause?


Zen00 is offline  
Sponsored Links
Advertisement
 
post #4 of 17 (permalink) Old 01-28-2013, 05:26 PM
New to Overclock.net
 
tom.slick's Avatar
 
Join Date: May 2009
Location: Orange County
Posts: 1,012
Rep: 158 (Unique: 128)
Use window.setTimeout instead.
Code:
var delay = 1000;
function Timer() {
    // do whatever

    window.setTimeout(Timer, delay);
}

window.setTimeout(Timer, delay);
You can manipulate delay in the body of your function.


Or if you just want a button that just makes it look like it is pausing thing, but does not really pause anything. the below code will simulate
a pause button. It will stop the counter and then resume counting where it left off, (it simulates a pause).
The stop button will stop and reset the counter.
The restart button will reset the counter and restart it.

Code:
<!DOCTYPE html>
<html>
<body>

<p>A counter that you can Start/Stop/Pause</p>
<p id="timer"></p>

<button onclick="ReStartFunction()">ReStart</button>
<button onclick="StopFunction()">Stop</button>
<button id="pause" onclick="PauseFunction()">pause</button>

<script>

var pause=0;
var count=0;
var counter=setInterval(timer, 1000); 
var stoped=0
function timer()
{
  count=count+1;
  document.getElementById("timer").innerHTML=count + " secs"; 
}

function StopFunction()
{
  clearInterval(counter);
  window.count=0;
  window.pause=0;
  document.getElementById("pause").innerHTML="Pause"
  window.stoped=1
  document.getElementById("timer").innerHTML=count + " secs";
}

function ReStartFunction()
{
  if (counter)
  {
    clearInterval(counter);
    window.pause=0;
    window.count=0;
    window.stoped=0
    window.counter=setInterval(timer, 1000); 
    count=count+1;
    document.getElementById("pause").innerHTML="Pause"
    document.getElementById("timer").innerHTML=count + " secs"; 
  }
}

function PauseFunction()
{
  if (stoped==0)
  { 
    if (pause==0) 
    {
      clearInterval(counter);
      document.getElementById("pause").innerHTML="Resume"
      pause=1;
      return;
    }

  if (pause==1) 
    {
      window.counter=setInterval(timer, 1000); 
      document.getElementById("timer").innerHTML=count + " secs"; 
      document.getElementById("pause").innerHTML="Pause"
      pause=0;
      return;
    }
  }
  return;
}

</script>

</body>
</html>


tom.slick is offline  
post #5 of 17 (permalink) Old 01-31-2013, 10:33 AM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
Thanks for the help, as it turns out I didn't need a pseudo pause button at all since I was storing the calculated values in variables and HTML text so when I cleared the interval it didn't affect the timer after all.


With that my first webapp is done. Does anyone have some web hosting where I can showcase it to you from?


Zen00 is offline  
post #6 of 17 (permalink) Old 01-31-2013, 02:19 PM
New to Overclock.net
 
tom.slick's Avatar
 
Join Date: May 2009
Location: Orange County
Posts: 1,012
Rep: 158 (Unique: 128)
heliohost is good for a free host.
http://www.heliohost.org/home/features


tom.slick is offline  
post #7 of 17 (permalink) Old 01-31-2013, 04:29 PM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
Thanks, I found another site to put it on as well.

http://zenproductions.co.nf/

Though the bandwidth is low, but whatever, I don't expect many people to actually bother.


Zen00 is offline  
post #8 of 17 (permalink) Old 02-01-2013, 09:31 AM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
I added millisecond support, however instead of incrementing every second now, it increments every 5 seconds, even with the interval period set to 1. In order to get the timer correctish I have to increment every 200 intervals rather than 1000. Is there a way I can get this more accurate?


Zen00 is offline  
post #9 of 17 (permalink) Old 02-01-2013, 09:37 AM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
After doing some reading I found that most browsers don't like lots of calls of setInterval() so instead of calling it every millisecond I'm calling it every 10 now. This reduces the accuracy of the timer from .001 to .01, but not enough that most of you will know or care.


Zen00 is offline  
post #10 of 17 (permalink) Old 02-01-2013, 09:44 AM - Thread Starter
Amateur Games Dev
 
Join Date: Feb 2010
Location: Utah
Posts: 4,084
Rep: 185 (Unique: 147)
Now that the code is finished, please feel free to peruse and validate it if you wish. Thanks for any bug reports I get!
Code:
<!DOCTYPE HTML>
<html lang="en">
        <head>
                <style type="text/css">
                        body {
                                background-color:black;
                                background-image:url('timerappbackground.png');
                                background-position:center top;
                                background-repeat:no-repeat;
                                width:700px;
                                height:900px;
                                margin:0 auto 0 auto;
                        }
                        
                        #gobutton {
                                position:relative;
                                left:240px;
                                top:244px;
                        }
                        
                        #stopbutton {
                                position:relative;
                                left:16px;
                                top:465px;
                        }
                        
                        #display {
                                position:relative;
                                width:250px;
                                left:226px;
                                top:185px;
                                color: gold;
                                font-size: 50px;
                                font-family: Verdana, Geneva, Tahoma, sans-serif;
                                text-align:center;
                        }
                </style>
        
                <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
                <title>Simple Timer</title>
                <meta name="description" content="This webpage demonstrates the capabilities of the Simple Timer for people who do not have access to a webOS operating device.">
        </head>
        
        <body>
                <div id="display">
                        <label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label>
                </div>
                <input type="image" id="gobutton" src="gobutton.png" alt="Go Button" width="220" height="220" onclick="startTimer()">
                <input type="image" id="stopbutton" src="stopbutton.png" alt="Go Button" width="220" height="220" onclick="stopTimer()">

                <script type="text/javascript">
                        <!--
                        var hoursLabel = document.getElementById("hours");
                        var minutesLabel = document.getElementById("minutes");
                        var secondsLabel = document.getElementById("seconds");
                        var totalSeconds = 0;
                        var totalMinutes = 0;
                        var totalHours = 0;
                        var counter;
                        var timerOn;
                        var htmlResets;
                        var totalMills = 0;
                        
                        function startTimer()
                        {
                                if(timerOn == 1)
                                {
                                        return;
                                }
                                else
                                {
                                        counter = setInterval(setTime, 10);
                                        timerOn = 1;
                                        htmlResets = 0;
                                }
                        }
                        
                        function stopTimer()
                        {
                                if(timerOn == 1)
                                {
                                        clearInterval(counter);
                                        timerOn = 0;
                                }
                                
                                if(htmlResets == 1)
                                {
                                        hoursLabel.innerHTML = "00";
                                        minutesLabel.innerHTML = "00";
                                        secondsLabel.innerHTML = "00";
                                        totalMills = 0;
                                        totalSeconds = 0;
                                        totalMinutes = 0;
                                        totalHours = 0;
                                }
                                else
                                {
                                        htmlResets = 1;
                                }
                        }
                        
                        function setTime()
                        {
                                ++totalMills;
                                if(totalHours == 99 & totalMinutes == 59 & totalSeconds == 60)
                                {
                                        totalHours = 0;
                                        totalMinutes = 0;
                                        totalSeconds = 0;
                                        hoursLabel.innerHTML = "00";
                                        minutesLabel.innerHTML = "00";
                                        secondsLabel.innerHTML = "00";
                                        clearInterval(counter);
                                }
                                if(totalMills == 100)
                                {
                                        totalSeconds++;
                                        secondsLabel.innerHTML = pad(totalSeconds%60);
                                        totalMills = 0;
                                }
                                if(totalSeconds == 60)
                                {
                                        totalMinutes++;
                                        minutesLabel.innerHTML = pad(totalMinutes%60);
                                        totalSeconds = 0;
                                }
                                if(totalMinutes == 60)
                                {
                                        totalHours++;
                                        hoursLabel.innerHTML = pad(totalHours);
                                        totalMinutes = 0;
                                }
                        }
                        
                        function pad(val)
                        {
                                var valString = val + "";
                                if(valString.length < 2)
                                {
                                        return "0" + valString;
                                }
                                else
                                {
                                        return valString;
                                }
                        }
                //-->
                </script>
        </body>
</html>


Zen00 is offline  
Reply

Quick Reply
Message:
Options

Register Now

In order to be able to post messages on the Overclock.net - An Overclocking Community forums, you must first register.
Please enter your desired user name, your email address and other required details in the form below.
User Name:
If you do not want to register, fill this field only and the name will be used as user name for your post.
Password
Please enter a password for your user account. Note that passwords are case-sensitive.
Password:
Confirm Password:
Email Address
Please enter a valid email address for yourself.
Email Address:

Log-in



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Show Printable Version Show Printable Version
Email this Page Email this Page


Forum Jump: 

Posting Rules  
You may post new threads
You may post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off