DEV Community

Cover image for Create a Stopwatch in JavaScript

Create a Stopwatch in JavaScript

GSPTeck on December 14, 2020

Creating a timer is a very simple task. We will only be using variables, functions and THAT'S IT! HTML code: <html> <head> ...
Collapse
 
ibnsamy96 profile image
Mahmoud Ibn Samy

It's a good implementation but I think by the time it won't represent the real-time as the 'setTimeout()' function won't run after an exact second, there will be some small lag.
I think it will be better if you made use of the Date object.

Collapse
 
gspteck profile image
GSPTeck

That's a great idea, but at the moment I don't know how to do that.
If I ever learn how to do it, I might update the post.

Collapse
 
saraswat_dev profile image
Saraswat Majumder

Why did you use a string inside settimeout ? setTimeout(timer,1) works too

Collapse
 
gspteck profile image
GSPTeck

I just decided to use that at the time, but yeah that works too.

Collapse
 
njecky profile image
Félix Désiré Njecky Eboumbou

Salut très bien

Collapse
 
l42ph profile image
L42ph

Found this when I was searching for a simple stopwatch. It's a nice starting point, but as others said, setTimeout() isn't 100% reliable, so I've made a version that uses performance.now() to keep track of time. It might be best to use window.requestAnimationFrame() for the most stable update frequency, but then you'll always have 60 cycles per second, and you might not need/want that many.
Also, I wanted to have millisecond precision, and the ability to start the timer delayed, so you can 'alt-tab to another window' / 'activate another tab in your browser' before it starts!
Please don't bother commenting on code readability, cuz I don't care for that, it's purely for functionality.

jsfiddle.net/Larph/he10jyu9/

Collapse
 
kimbrother6 profile image
kimbrother6

This is a very good post!!!
However, there are times when the code runs in the timerCycle function. If I run the function again after exactly 1 second, wouldn't the time be wrong? Or is it not the time to be so concerned?

Collapse
 
harshvats2000 profile image
HARSH VATS

Your code might work but I really don't think it's good level of code bcoz it's not understandable easily for someone else analysing it.
Have a look at mine and decide yourself which one is better.
jsfiddle.net/2vwcd3a8/

Collapse
 
rdrahuldhiman profile image
Rahul Dhiman

Reset Functionality is not fully implemented.

Collapse
 
gspteck profile image
GSPTeck

What do you mean? Reset just makes the string 00:00:00 again. What isn't implemented?

Collapse
 
rdrahuldhiman profile image
Rahul Dhiman

It is just resetting the UI Part but not the actual variables which are still storing the old time values. Below is what i did to get it working.
function resetTimer() {
timer.innerHTML = "00:00:00";
stoptime = true;
hr = 0;
sec = 0;
min = 0;
}

Thread Thread
 
gspteck profile image
GSPTeck

yeah you are right! missed that lol

Collapse
 
ubongs profile image
Ubong Sylvester

Great post. Thanks for this. You can clearTimeout to remove the lag when you stop/reset the timer.

Created a global variable
let startTimeout;

then in the timerCycle() function, initiate the timeout with
startTimeout = setTimeout('timerCycle()', 1000);

Create this function for stopping timer cycle
function stopTimerCycle() {
clearTimeout(startTimeout);
}

then Add stopTimercycle() and "function stopTimer()" to "function resetTimer()"

Collapse
 
luishnzg profile image
luishnzg

Thank you! I am trying to learn javascript and I need more of these projects explained.

Collapse
 
gspteck profile image
GSPTeck

Very happy I could help!

Collapse
 
praveenkalady profile image
praveen

Great post bro

Collapse
 
gspteck profile image
GSPTeck

Thank you!

Collapse
 
hansdenotter profile image
hansdenotter

How can I learn to do this kind of projects myself instead of copying the code?

Collapse
 
gspteck profile image
GSPTeck

If you don't have a lot of programming experience it will be hard to just work on projects without any online help. I personally still looked up stuff on the internet for this project as I do for every project.

Collapse
 
himanshuhunk profile image
himanshuhunk

how to restart timer?

Collapse
 
gspteck profile image
GSPTeck

There is a "resetTimer()" function which will reset the timer.