JavaScript Stopwatch Break

Question

JavaScript Stopwatch Break

Below is the code snippet. How can a button be implemented to pause the timer and then resume it when the resume button is pressed? The // marks indicate where I plan to add my pause and resume functionality. Thank you in advance for your assistance!

<head>
<script type="text/javascript">

var d1 = new Date();
d1.setHours(1,0,0);

function f(){
var h= d1.getHours();
var m= d1.getMinutes();
var s=d1.getSeconds();
m= (m<10)?"0"+m: m;
s= (s<10)? "0"+s : s;

var el= document.getElementById("inputid");
el.value= h+":"+m+":"+s;
d1.setSeconds(d1.getSeconds()-1);
if( h==0 && m==0 && s==0 ) clearTimeout(t)
var t= setTimeout("f()",1000);
}

</script>
</head>
<body>
<form><input type="text" id="inputid"></form>
<script type="text/javascript">f()</script>

//pause and resume buttons will be inserted here.
</body>

javascript timer

Answer 1

Answer №1

To halt a timeout, use the clearTimeout() function with the value returned from setTimeout, or in this scenario, t.

Check out this live demonstration: http://jsfiddle.net/tJWmH/

Another piece of advice: do not pass a string to setTimeout. Instead, pass a reference to a function like this:

var t = setTimeout(f,1000)

Instead of using this code snippet:

var t = setTimeout("f()",1000);

If you're curious about why, search for "eval is evil".

Answer 2

To halt a timeout, use the clearTimeout() function with the value returned from setTimeout, or in this scenario, t.

Check out this live demonstration: http://jsfiddle.net/tJWmH/

Another piece of advice: do not pass a string to setTimeout. Instead, pass a reference to a function like this:

var t = setTimeout(f,1000)

Instead of using this code snippet:

var t = setTimeout("f()",1000);

If you're curious about why, search for "eval is evil".

Answer 3

Answer №2

To implement a different strategy, consider setting a variable called paused when the button is pressed. Within your function f, if paused is true, exit the function immediately.

setInterval(function(){
  if (paused) return;
  // update the DOM
}, 1000);

input

<input type="button" value="Pause" onClick="window.paused=true" />

Check out this simple JSFiddle example

Answer 4

To implement a different strategy, consider setting a variable called paused when the button is pressed. Within your function f, if paused is true, exit the function immediately.

setInterval(function(){
  if (paused) return;
  // update the DOM
}, 1000);

input

<input type="button" value="Pause" onClick="window.paused=true" />

Check out this simple JSFiddle example

Answer 5

Answer №3

Give this a shot:

let currentDate = new Date();
currentDate.setHours(1,0,0);
let timer;

function startTimer() {
    let hours = currentDate.getHours();
    let minutes = currentDate.getMinutes();
    let seconds = currentDate.getSeconds();
    minutes = (minutes < 10) ? ('0'+minutes) : minutes;
    seconds = (seconds < 10) ? ('0'+seconds) : seconds;

    let element = document.getElementById("inputField");
    element.value = hours + ":" + minutes + ":" + seconds;

    if (hours == 0 && minutes == 0 && seconds == 0) {
        clearTimeout(timer)
        return;   
    }
    currentDate.setSeconds(currentDate.getSeconds() - 1);

    timer = setTimeout(startTimer, 1000);
}

function pauseTimer() {
    clearTimeout(timer);
}
function resumeTimer() {
    timer = setTimeout(startTimer, 1000);
}
resumeTimer();

To pause the timer, simply call pause(), and to resume it, call resume(). It's that simple! Note that resume() is called once at the beginning to start the countdown.

UPDATE: Make sure to check if the timer has reached zero before decrementing, and return after pausing to prevent resuming without checking.

Answer 6

Give this a shot:

let currentDate = new Date();
currentDate.setHours(1,0,0);
let timer;

function startTimer() {
    let hours = currentDate.getHours();
    let minutes = currentDate.getMinutes();
    let seconds = currentDate.getSeconds();
    minutes = (minutes < 10) ? ('0'+minutes) : minutes;
    seconds = (seconds < 10) ? ('0'+seconds) : seconds;

    let element = document.getElementById("inputField");
    element.value = hours + ":" + minutes + ":" + seconds;

    if (hours == 0 && minutes == 0 && seconds == 0) {
        clearTimeout(timer)
        return;   
    }
    currentDate.setSeconds(currentDate.getSeconds() - 1);

    timer = setTimeout(startTimer, 1000);
}

function pauseTimer() {
    clearTimeout(timer);
}
function resumeTimer() {
    timer = setTimeout(startTimer, 1000);
}
resumeTimer();

To pause the timer, simply call pause(), and to resume it, call resume(). It's that simple! Note that resume() is called once at the beginning to start the countdown.

UPDATE: Make sure to check if the timer has reached zero before decrementing, and return after pausing to prevent resuming without checking.

Answer 7

Answer №4

I came across this code snippet and decided to incorporate it into my projects. The original post can be found here:

Timer = function(callback, delay) {
  var timerId, start, remaining = delay;

  this.pause = function() {
    window.clearTimeout(timerId);
    remaining -= new Date() - start;
  };

  this.resume = function() {
    start = new Date();
    timerId = window.setTimeout(callback, remaining);
  };

  this.resume();
};

To use the code:

var t = new Timer(function(){
 /* ... */
}, 500);

t.pause();
t.resume();

Answer 8

I came across this code snippet and decided to incorporate it into my projects. The original post can be found here:

Timer = function(callback, delay) {
  var timerId, start, remaining = delay;

  this.pause = function() {
    window.clearTimeout(timerId);
    remaining -= new Date() - start;
  };

  this.resume = function() {
    start = new Date();
    timerId = window.setTimeout(callback, remaining);
  };

  this.resume();
};

To use the code:

var t = new Timer(function(){
 /* ... */
}, 500);

t.pause();
t.resume();

JavaScript Stopwatch Break

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is hard coding permissions in the frontend considered an effective approach?

Passing in additional custom post data alongside serializing with jQuery

Update the radio button to display the value entered in the text input field

Connect the AngularJS data model with a Foundation checkbox element

How to use Javascript to fetch HTML content from an external website

Crawlers designed to handle websites with never-ending scroll feature

Validate Bootstrap - Transmit data from all form fields to external PHP script

Is there an improved guide available for using Netbeans' new language support plug-in?

What is the best way to insert a two-worded value into the value attribute of an input tag using Express-Handlebars?

"Automatically insert a new row into the table if the cell loses focus and is not left

Ways to attach the close event to the jquery script

Ways to stop jQuery from stripping the <script> elements

Create an interface that inherits from another in MUI

Utilize the dynamic duo of GridLayout and ScrollView within the Famo.us JS framework

Error Alert: React Native object cannot be used as a React child within JSON, leading to an Invariant Violation

Creating a smooth fading effect for an element within a react component

Transferring information from the main function to getServerSideProps

The image component is missing the necessary "src" attribute even though a valid src value has been provided as a prop

Enter a keyword in the search bar to find what you're looking

Ensure prototype is easily accessible within vuex