We Keep Coding

Trouble with setInterval() and clearInterval() while creating a pomodoro timer

I've been learning javascript for the last few months, so I am a rookie. Longtime reader, first time poster. The full code for what I'm working on is available here in this codepen
https://codepen.io/dconnenc/pen/yLpwrQO?editors=1011
I'm hitting a pretty bad wall.
My current problem is keeping my clock maintaining proper mm:ss format, and getting it to tick down to 00:00.
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
I had been using the above, but it became too fragile inside of the interval function and begin adding 0s at the start at every interval. I have a fix so that it stops adding zeroes, but now it only ticks down to 0:00, and never reaches 00:00.
sessionTime = sessionTime < 10 && !sessionTime.toString().startsWith("0") ? "0" + sessionTime : sessionTime;
sec = sec < 10 && !sessionTime.toString().startsWith("0") ? "0" + sec : sec;
I've got stop for the day, and take a break, but a larger snippet of the code is below, and of course the link to the full codepen is above.
function timer() {
//ticks down timer
if(sec > 0){
sec--;
} else if (sec == 0 && sessionTime == 0) {
console.log("check");
document.getElementById('time-left').textContent = breakTime + ":" + sec;
} else if (sec == 0) {
sessionTime--;
sec = 59;
}
//mm:ss format (started running into an error with the interval returning extra 0s)
sessionTime = sessionTime < 10 && !sessionTime.toString().startsWith("0") ? "0" + sessionTime : sessionTime;
sec = sec < 10 && !sessionTime.toString().startsWith("0") ? "0" + sec : sec;
//updates display
document.getElementById('time-left').textContent = sessionTime + ":" + sec;
}

Try this with the min then with the seconds
if(sessionTime.toString().length === 1){
if(sessionTime === 0){
sessionTime = sessionTime;
}else{
sessionTime = "0"+sessionTime;
}
}

This implements the expected behavior of your timer (Using a 500ms interval and 3 second "minutes") using a somewhat minimized example. Session Time is hardcoded to 3 minutes.
Mixing strings and integers in JavaScript can easily lead to coding issues like the ones you have experienced, especially when trying to use the + operator on mixed strings and integers. Best to avoid that in your control variables and lead with an obvious string when you're setting displays.
let oneSecond = 500;
let oneMinute = 3;
let sessionTime = 3;
var secondsRemaining;
var intervalId;
function reset() {
console.log('check')
clearInterval(intervalId);
intervalId = 0
}
function start() {
secondsRemaining = sessionTime * oneMinute;
setTimeLeft()
intervalId = setInterval(timer, oneSecond)
}
function timer() {
if ( --secondsRemaining <= 0 ) {
reset()
}
setTimeLeft()
}
function setTimeLeft() {
document.getElementById('time-left').textContent = `${(''+ ~~(secondsRemaining / oneMinute)).padStart(2, '0')}:${(''+ secondsRemaining % oneMinute).padStart(2, '0')}`;
}
start()
<span id='time-left'></span>
This version handles multiple timers.
let oneSecond = 500;
let oneMinute = 3;
let sessionTime = 3;
function Timer(seconds, resetCallback, updateCallback, period) {
this.s = seconds;
this.p = period || oneSecond;
this.callback = resetCallback || Function.prototype;
this.update = updateCallback || Function.prototype;
this.reset = function() {
this.intervalId = clearInterval(this.intervalId)
this.callback()
}
this.start = function() { this.update(this.s); this.intervalId = setInterval(this.timer.bind(this), [ this.p ]) }
this.timer = function() { if (--this.s <= 0) this.reset(); this.update(this.s) }
}
function setTimeLeft(sec, id) {
document.getElementById(id || 'time-left').textContent = `${(''+ ~~(sec / oneMinute)).padStart(2, '0')}:${(''+ sec % oneMinute).padStart(2, '0')}`;
}
document.addEventListener("DOMContentLoaded", function() {
new Timer(sessionTime * oneMinute, () => console.log('check 1000ms'), setTimeLeft, 1000).start()
new Timer(6 * oneMinute, () => console.log('check 500ms'), (s) => { setTimeLeft(s, 'time-left2')}, 500).start()
new Timer(15 * oneMinute, () => console.log('check 300ms'), (s) => { setTimeLeft(s, 'time-left3')}, 200).start()
})
<span id='time-left'></span><br />
<span id='time-left2'></span><br />
<span id='time-left3'></span>

JavaScript countdown timer counting past zero

This might be a really simple thing to ask but I've got a JavaScript countdown timer, but I can't stop it from counting past 0:00. Instead of stopping at this point, it will continue to -1:59 etc.
I'd also like it to play a beeping sound (which can be found here) when the timer reaches zero.
This is the code I've got so far:
<div class="stopwatch">
<div class="circle">
<div class="time" id="timer"></div>
</div>
</div>
<script>
document.getElementById('timer').innerHTML =
02 + ":" + 30;
startTimer();
function startTimer() {
var presentTime = document.getElementById('timer').innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s==59){m=m-1}
document.getElementById('timer').innerHTML =
m + ":" + s;
console.log(m)
setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
if (sec < 0) {sec = "59"};
return sec;
}
</script>
Any help on this would be appreciated.

To stop the counter when it reaches zero you have to stop calling the startTimer() function. In the following snippet I have implemented a check to do exactly that.
function startTimer() {
var presentTime = document.getElementById('timer').innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s==59){m=m-1}
document.getElementById('timer').innerHTML =
m + ":" + s;
console.log(m)
// Check if the time is 0:00
if (s == 0 && m == 0) { return };
setTimeout(startTimer, 1000);
}

Time remaining to the next 5 minutes - Javascript

I am trying to display the time remaining for the next 5 minutes (snapped to the full 5 minutes of the current time e.g., 15:05, 15:10..)
I was able to achieve the same for the time remaining for next Hour (Not minutes):
<span class="timer"></span>
<script>
function secondPassed() {
var cur_date = new Date();
var hour = cur_date.getHours();
var minutes = cur_date.getMinutes();
var seconds = cur_date.getSeconds();
var minutes_remain = parseInt(59 - parseInt(minutes));
var seconds_remain = parseInt(60 - parseInt(seconds));
var timers = document.getElementsByClassName('timer');
for (var i = 0; i < timers.length; i++) {
timers[i].innerHTML = minutes_remain+":"+seconds_remain;
}
}
var countdownTimer = setInterval(secondPassed, 1000);
</script>
JSfiddle : http://jsfiddle.net/ov0oo5f7/

Something like this?
function secondPassed() {
var cur_date = new Date();
var minutes = cur_date.getMinutes();
var seconds = cur_date.getSeconds();
var timers = document.getElementsByClassName('timer');
for (var i = 0; i < timers.length; i++) {
timers[i].innerHTML = (4 - minutes % 5) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds);
}
}
var countdownTimer = setInterval(secondPassed, 1000);
<span class="timer"></span>

You can reduce the code a bit and to make it more accurate, use setTimeout and call the function as close as reasonable to the next full second. setInterval will slowly drift.
// Return the time to next 5 minutes as m:ss
function toNext5Min() {
// Get the current time
var secs = (new Date() / 1000 | 0) % 300;
// Function to add leading zero to single digit numbers
function z(n){return (n < 10? '0' : '') + n;}
// Return m:ss
return (5 - secs/60 | 0) + ':' + z(60 - (secs%60 || 60));
}
// Call the function just after the next full second
function runTimer() {
console.log(toNext5Min());
var now = new Date();
setTimeout(runTimer, 1020 - now % 1000);
}
The above ticks over on the full minute so that at say 10:00:00 it shows 5:00. If you'd rather is showed 0:00, then the last line of toNext5Min should be:
return (5 - (secs? secs/60 : 5) | 0) + ':' + z(60 - (secs%60 || 60));

This is what you need to change to get it to work the way you want:
var minutes = cur_date.getMinutes();
var seconds = cur_date.getSeconds();
try change it to this:
var minutes_remain = 5 - minutes%5 - 1;
var seconds_remain = 59 - seconds;
Try it out here: jsFiddle

Change your minutes remain to following line. It calculates current minute mod by 5 subtracted from 5, which is what you need.
function secondPassed() {
var cur_date = new Date();
var hour = cur_date.getHours();
var minutes = cur_date.getMinutes();
var seconds = cur_date.getSeconds();
var minutes_remain = parseInt(5 - parseInt(minutes%5));
var seconds_remain = parseInt(60 - parseInt(seconds));
var timers = document.getElementsByClassName('timer');
for (var i = 0; i < timers.length; i++) {
timers[i].innerHTML = minutes_remain+":"+seconds_remain;
}
}
var countdownTimer = setInterval(secondPassed, 1000);
Updated fiddle http://jsfiddle.net/ov0oo5f7/2/

You can work out what the next 5 minutes interval will be if you divide by 5, round it up, and multiply by 5 again.
You need to handle if you are on an exact minute otherwise minutes_remain will show as 1 minute less.
In terms of being accurate, you don't need to parseInt everywhere as they are all numbers already. I've tried to make it as efficient as possible. In any case, you are only checking it once a second, so you can't guarantee accuracy.
http://jsfiddle.net/ov0oo5f7/6/
function secondPassed() {
var cur_date = new Date();
var hour = cur_date.getHours();
// handle 0 seconds - would be 60 otherwise
var seconds_remain = 60 - (cur_date.getSeconds() || 60);
// handle ceil on 0 seconds - otherwise out by a minute
var minutes = cur_date.getMinutes() + (seconds_remain == 0 ? 0 : 1);
var minutes_remain = Math.ceil(minutes/5) * 5 - minutes;
var timers = document.getElementsByClassName('timer');
for (var i = 0; i < timers.length; i++) {
timers[i].innerHTML = minutes_remain+":"+seconds_remain;
}
}
var countdownTimer = setInterval(secondPassed, 1000);

If you are looking for the mechine time and counting it down for 5 minutes , then this might help -
var startTime = new Date();
function secondPassed() {
var cur_date = new Date();
if(parseInt((cur_date - startTime)/1000) >300 ){
window.clearInterval(countdownTimer);
}
var hour = cur_date.getHours();
var minutes = cur_date.getMinutes();
var seconds = cur_date.getSeconds();
var minutes_remain = parseInt(59 - parseInt(minutes));
var seconds_remain = parseInt(60 - parseInt(seconds));
var timers = document.getElementsByClassName('timer');
for (var i = 0; i < timers.length; i++) {
timers[i].innerHTML = minutes_remain+":"+seconds_remain;
}
}
var countdownTimer = setInterval(secondPassed, 1000);

A simple approach is nothing that 5 minutes are 5*60*1000 milliseconds, thus
var k = 5*60*1000;
var next5 = new Date(Math.ceil((new Date).getTime()/k)*k);

Running a Javascript Clock at 4x Speed [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript to run the Clock (date and time) 4 times speeder
I'm trying to make a clock that starts at a time value (hh:mm:ss) that I've supplied, and runs at 4x speed (for the server time of an online game that runs 4x actual time). I've modified a free clock that I found online to do this, but it only works for every other minute (try the code below to see exactly what I mean if that doesn't make sense).
var customClock = (function () {
var timeDiff;
var timeout;
function addZ(n) {
return (n < 10 ? '0' : '') + n;
}
function formatTime(d) {
t1 = d.getHours();
t2 = d.getMinutes();
t3 = d.getSeconds() * 4;
if (t3 > 59) {
t3 = t3 - 60;
t2 = t2 + 1;
}
if (t2 > 59) {
t2 = t2 - 60;
t1 = t1 + 1;
}
if (t1 > 23) {
t1 = 0;
}
return addZ(t1) + ':' + addZ(t2) + ':' + addZ(t3);
}
return function (s) {
var now = new Date();
var then;
var lag = 1015 - now.getMilliseconds();
if (s) {
s = s.split(':');
then = new Date(now);
then.setHours(+s[0], +s[1], +s[2], 0);
timeDiff = now - then;
}
now = new Date(now - timeDiff);
document.getElementById('clock').innerHTML = formatTime(now);
timeout = setTimeout(customClock, lag);
}
}());
window.onload = function () {
customClock('00:00:00');
};
Any idea why this is happening? I'm pretty new to Javascript and this is definitely a little hack-ey. Thanks

i take the orginal time and substract it from the current then multiply it by 4 and add it to the orginal time. I think that should take care or the sync problem.
(function(){
var startTime = new Date(1987,08,13).valueOf() //save the date 13. august 1987
, interval = setInterval(function() {
var diff = Date.now() - startTime
//multiply the diff by 4 and add to original time
var time = new Date(startTime + (diff*4))
console.log(time.toLocaleTimeString())
}, 1000)
}())
How to use with a custom date (use the Date object)
Date(year, month, day, hours, minutes, seconds, milliseconds)

var lag = 1015 - now.getMilliseconds(); is attempting to "run this again a smidge (15 ms) after the next clock tick". Make this value smaller (divide by 4?), and this code will run more frequently.
Next up, get it to show 4x the current clock duration. Similar problem: multiply now's details by 4 either inside or outside formatTime()

I would first create a Clock constructor as follows:
function Clock(id) {
var clock = this;
var timeout;
var time;
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.stop = stop;
this.start = start;
var element = document.getElementById(id);
function stop() {
clearTimeout(timeout);
}
function start() {
timeout = setTimeout(tick, 0);
time = Date.now();
}
function tick() {
time += 1000;
timeout = setTimeout(tick, time - Date.now());
display();
update();
}
function display() {
var hours = clock.hours;
var minutes = clock.minutes;
var seconds = clock.seconds;
hours = hours < 10 ? "0" + hours : "" + hours;
minutes = minutes < 10 ? "0" + minutes : "" + minutes;
seconds = seconds < 10 ? "0" + seconds : "" + seconds;
element.innerHTML = hours + ":" + minutes + ":" + seconds;
}
function update() {
var seconds = clock.seconds += 4;
if (seconds === 60) {
clock.seconds = 0;
var minutes = ++clock.minutes;
if (minutes === 60) {
clock.minutes = 0;
var hours = ++clock.hours;
if (hours === 24) clock.hours = 0;
}
}
}
}
Then you can create a clock and start it like this:
var clock = new Clock("clock");
clock.start();
Here's a demo: http://jsfiddle.net/Nt5XN/

how to create a javascript countdown which on refreshing continues counting

I try it with javascript and jquery but no idea how to do that. i wont to let the timer not begins on refreshing counting again. It´s same as an auction when he counting down 3,2 and on refreshing he don´t begins again it should continue count down where it last ended. And on other products it must count from 3 again. Have anyboy an idea?
Edit: because some users missunderstood what i am searching for.
my issue is that i don´t know how to save the time when someone refresh the page to continue to count it down. if someone refresh the site at 21sec and he or she have 30 secs to make there choice. and after refreshing the site, the counter will count at 21sec down and not started again by 30sec again.
no ajax.
When possible hardcoded.
And if not possible then the cookie variant.

You can set a name to your window on load of the page. Before setting the name check whether this window already has a name.
if it doesn't have a name, set a name to the window and start counting at 0 and save the count value in a cookie each time it increment.
if it does have a name(that means page is reloaded), read the count value from the cookie and do the increment and save to cookie.
EDIT: Example, Call initCount() function on body load. Use decrementAndSave function to decrement the value of the count and save it to cookie.
var count = 3;// 3 -> 2 -> 1
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function initCount() {
if (window.name) {
count = getCookie("count_" + window.name);// to keep separate count cookies for each window
} else {
window.name = "w_" + (new Date().getTime());
count = 3;
setCookie("count_" + window.name, count, null);
}
}
function decrementAndSave() {
count--;
// separate cookie for each window or tab
setCookie("count_" + window.name, count, null);
}

It's not Perfect but I designed this script to do a 30min countdown and then to change some text during the last few seconds. The only issue with it is that when it gets to 1:00 it starts at 30:60 and I haven't figured out how to fix that yet. This may not work perfectly for what your looking for but it might put you on the right path.
<script>
//add leading zeros
setInterval(function() {
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";
//Decide how much should be subtracted from the time
if (m > 30) {
y = b;
}
else if (m < 30) {
y = a;
}
//elements for changing text
if (y < 2 && c < 15) {
q = z;
}
else {
q = v;
}
var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);
</script>
<div align="center" id="timer" style='color:black;font-size:24px;' ></div>

If you have a countdown, then you must have some sort of end time defined. So instead of having a countdown and just subtracting 1 every second, try something like this:
var endTime = new Date(2011,11,13,0,0,0); // Midnight of December 13th 2011
var timer = setInterval(function() {
var now = new Date();
var timeleft = Math.max(0,Math.floor((endTime.getTime()-now.getTime())/1000));
var d, h, m, s;
s = timeleft % 60;
timeleft = Math.floor(timeleft/60);
m = timeleft % 60;
timeleft = Math.floor(timeleft/60);
h = timeleft % 24;
timeleft = Math.floor(timeleft/24);
d = timeleft;
document.getElementById('counter').innerHTML = "Time left: "+d+" days, "+h+" hours, "+m+" minutes, "+s+" seconds.";
if( timeleft == 0) clearInterval(timer);
},1000);

var interval = 90000; //90 secounds
function reset() {
localStorage.endTime = +new Date() + interval;
}
if (!localStorage.endTime) {
reset();
}
function millisToMinutesAndSeconds(millis) {
var minutes = Math.floor(millis / 60000);
var seconds = ((millis % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
setInterval(function () {
var remaining = localStorage.endTime - new Date();
if (remaining >= 0) {
document.getElementById("tooltip").innerText =
millisToMinutesAndSeconds(remaining);
} else {
reset();
}
}, 100);