Develop Reference

How to compare 2 date variables every minute in Javascript?

I've 2 date variables in my script, One representing the current time and the other 2 minutes later. My aim is to check both values every minute and trigger a function when current is more or equal than the latter.
Here's my code and for some reason it doesn't execute the doing() function
var current = new Date(Date.now());
var endtime = new Date(Date.now() + 2 * 60 * 1000);
hours = ('0' + endtime.getHours()).slice(-2);
mins = ('0' + endtime.getMinutes()).slice(-2);
secs = ('0' + endtime.getSeconds()).slice(-2);
var gametime = hours + ":" + mins + ":" + secs;
$('#endtime').html(gametime);
var i = setInterval(function () { myFunction(); }, 60000);
function myFunction() {
if (new Date(current) > new Date(endtime)) {
doing();
}
}
function doing() {
var body = $('#alert');
var colors = ['white', 'transparent'];
var currentIndex = 0;
setInterval(function () { light(); }, 400);
function light() {
body.css({
backgroundColor: colors[currentIndex]
});
if (!colors[currentIndex]) {
currentIndex = 0;
} else {
currentIndex++;
}
}
alert("Time's up!");
clearInterval(i);
}

Well, you set current and endtime but neither ever changes, so every time myFunction gets called, the condition evaluates to false and so doing is never called.
I would add an else, that advances current, i.e.:
function myFunction() {
if (new Date(current) > new Date(endtime)) {
doing();
} else {
current = new Date(Date.now())
}
}
This way, eventually, current will become greater than endtime.

Thanks to Konrad Linkowski who told me to update the variables, I updated "Current" time variable inside the interval which solved the issue.

How to stop timer count and start with saved time

I'm kinda new to programming, but recently I was trying to do little first project of mine called timer count, it's just simple local website which I open when I'm deciding to start programming during the day and it counts the time. I created 2 buttons with 2 different functions (start,stop), but the problem I'm stuck on is I don't know how to implement stop function. The idea is that timer should stop after button click, and when I click start button it should start from saved time.
Here's HTML/CSS code:
<div class="timer-display-id">
<h1>Timer </h1>
<p id="timer">00:00:00 </p>
<button id="start-timer" onclick="start()">Start </button>
<button id="stop-timer" onclick="stop()">Stop </button>
</div>
<script src="timer.js"></script>
and here's JS code:
function stop() {
// not exactly sure if this function should be here, anyway no idea what to add to get this to work
clearInterval(interval);
start.disabled = false;
}
function convertSec(cnt) {
let sec = cnt % 60;
let min = Math.floor(cnt / 60);
if (sec < 10) {
if (min < 10) {return "0" + min + ":0" + sec;}
else {return min + ":0" + sec;}
}
else if ((min < 10) && (sec >= 10)) {return "0" + min + ":" + sec;}
else {return min + ":" + sec;}
}
function start() {
let ret = document.getElementById("timer");
let counter = 0;
let start = document.querySelector("#start-timer");
let stop = document.querySelector("#stop-timer");
start.disabled = true;
let interval = setInterval(function() {
ret.innerHTML = convertSec(counter++); // timer start counting here...
},1000);
}
I understand it might be very messy, kinda lack of logic, but it's best I can do for now. If you'd like to give some tips about code organizing, I'd appreciate it.

You nee to have interval accessible by both functions whileit holds the setInterval function, just move it outside the start function :
const ret = document.getElementById("timer");
const startBtn = document.querySelector("#start-timer");
let counter = 0;
let interval;
function stop() {
clearInterval(interval);
startBtn.disabled = false;
}
function convertSec(cnt) {
let sec = cnt % 60;
let min = Math.floor(cnt / 60);
if (sec < 10) {
if (min < 10) {
return "0" + min + ":0" + sec;
} else {
return min + ":0" + sec;
}
} else if ((min < 10) && (sec >= 10)) {
return "0" + min + ":" + sec;
} else {
return min + ":" + sec;
}
}
function start() {
startBtn.disabled = true;
interval = setInterval(function() {
ret.innerHTML = convertSec(counter++); // timer start counting here...
}, 1000);
}
<div class="timer-display-id">
<h1>Timer </h1>
<p id="timer">00:00:00 </p>
<button id="start-timer" onclick="start()">Start </button>
<button id="stop-timer" onclick="stop()">Stop </button>
</div>

If you want the count to be saved after you hit "stop", and to re-start from the same point, you will need to define your count variable somewhere outside the start() function, so that it can tell what count to restart from. At the moment, count is local to the start() function, which will reset it to zero every time.
By using the 1s interval timer to update the count, your counter will round each period to whole seconds. It would be slightly more complicated, but if you want to be able to add up the partial seconds from multiple counts, it would be more accurate to use something like Date.getTime() to record the time the start button is pressed, then check the elapsed time when stop() is triggered, and add that to your count. You might still want to use an interval timer to regularly update the current value though. Again, you would need to check that the variables you want to use have the correct scope, so that they are visible to the functions that use them, and not lost between function calls.

Countdown Timer not Stopping with clearInterval()

I'm having a problem get this countdown timer to stop at zero so the time won't show as a negative value. The console.log is getting called and works fine but for some reason the clearInterval() is not. This is driving me crazy and I'm close to quitting.
const timerContainer = document.getElementById('timerContainer');
const THREEMINUTES = 60 * 0.1;//5 seconds for testing
startTimer(THREEMINUTES, timerContainer);
function startTimer(duration, display) {
let start = Date.now();
let diff, min, sec;
let timer = () => {
diff = duration - (((Date.now() - start) / 1000) | 0);
//use bitwise to truncate the float
min = (diff / 60) | 0;
sec = (diff % 60) | 0;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
display.textContent = min + ':' + sec;
if (diff <= 0) {
stopTimer();
submit.disabled = 'true';
};
};
//call timer immediately otherwise we wait a full second
timer();
setInterval(timer, 1000);
function stopTimer() {
clearInterval(timer);
console.log("time's up", diff);
};
}
<div id="timerContainer"></div>

You are not saving the result of setInterval(timer, 1000);
you should use this:
let timerId;
timer();
timerId = setInterval(timer, 1000);
function stopTimer() {
clearInterval(timerId);
console.log("time's up", diff)
};
As you might see, the result of setInterval is a number (object in node), and all you then need to do is pass that value to clearInterval thus we save the value in the variable timerId for reference.

Don't pass the function that you want stopped to clearInterval().
Pass a reference to the timer that you started, so you need to make sure that when you start a timer, you capture a reference to the ID that will be returned from it.
// Function that the timer will invoke
function callback(){
. . .
}
// Set up and initiate a timer and capture a reference to its unique ID
var timerID = setInterval(callback, 1000);
// When needed, cancel the timer by passing the reference to it
clearInterval(timerID);

The code is fixed make sure you fix your submit button code.
You should first assign the value of setInterval to a variable. That variable is used while calling clearInterval which infact clears the interval.
const timerContainer = document.getElementById('timerContainer');
const THREEMINUTES = 60 * 0.1;//5 seconds for testing
startTimer(THREEMINUTES, timerContainer);
var timer = null;
function startTimer(duration, display) {
let start = Date.now();
let diff, min, sec;
let timer = () => {
diff = duration - (((Date.now() - start) / 1000) | 0);
//use bitwise to truncate the float
min = (diff / 60) | 0;
sec = (diff % 60) | 0;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
display.textContent = min + ':' + sec;
if (diff <= 0) {
stopTimer();
submit.disabled = 'true';
};
};
//call timer immediately otherwise we wait a full second
timer();
timer = setInterval(timer, 1000);
function stopTimer() {
clearInterval(timer);
console.log("time's up", diff);
};
}

setTimeout() executed more times?

I am trying to add functionality to a html/js stopwatch, but i have a problem with setTimeout() function. Why is it only executed once for me, but in this video:
https://www.youtube.com/watch?annotation_id=annotation_3059475893&feature=iv&src_vid=iSLWtGAw1Ic&v=gpFPppFU8s8
it is executed until someone stops it. Yeah I know I can use setInterval, but I'm just curious.
here is my code:
let running = false;
let time = 0;
function start() {
running = true;
timer();
}
function stop() {
running = false;
}
function reset() {
running = false;
time = 0;
document.getElementById("stw").innerHTML = "00:00:00";
}
function timer() {
if (running) {
setTimeout(function() {
time++;
let min = Math.floor(time / 100 / 60);
let sec = Math.floor(time / 100) % 60;
let mSec = time % 100;
if (min < 10) {
min = "0" + min;
}
if (sec < 10) {
sec = "0" + sec;
}
if (mSec < 10) {
mSec = "0" + mSec;
}
document.getElementById("stw").innerHTML =
min + ":" + sec + ":" + mSec;
}, 10);
}
}

When you use setTimeout() to create a loop, inside the function setTimeout() calls, you have to call setTimeout() again.
Here is a basic loop function that does it:
const loopFunc = () => {
console.log('loop');
setTimeout(loopFunc, 1000);
};
loopFunc(); // kick it off

In the video (around 2 minutes in), timer() calls itself recursively. Your code does not.

setTimeout() only calls its callback function once.
There are two ways to to have it call multiple times:
Use setInterval()
Use a recursive function to restart setTimeout() over and over again.
Example:
function timer() {
// do something
// call this function again in 10 milliseconds
setTimeout(timer, 10);
}

Trouble with multiple age counters (timers)

I have a page where I want to have "age counters" for bids put in by users. The number of users will vary from situation to situation, so that needs to be taken into consideration. I wrote this:
function timer(i) {
// this selects a 'hh:mm:ss' timestamp
if ($("#time_0" + i).text() !== "") {
var now = new Date();
var date = now.toDateString();
var tStamp = new Date(date + "," + $("#time_0" + i).text());
var diff = now - tStamp;
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor((diff / 1000) % 60);
if (mins < 10) {
mins = "0" + mins;
}
if (secs < 10) {
secs = "0" + secs;
} else if (secs == 60) {
secs = "00";
}
$("#user" + i + "-t").text(mins + ':' + secs);
}
}
$(document).ready(function() {
//
var ids = [];
$("td[id^='time_0']").each(function() {
var i = ($(this).attr("id")).slice(-1);
ids.push(i);
});
for (i in ids) { // in my example ids = [1,2,3]
setInterval(function() {timer(i);}, 1000);
}
});
The timer itself functions just as I want it to, but only for user #2 (the middle one). I thought that if I encountered this problem, it would be either the first or last user in the list that had a working timer, but I'm getting blank cells for users #1 and #3.
Does anyone have any ideas as to how I can fix this? Thank you for your time.
==Edit==
I made a bare-bones jsfiddle

In your version loop never went past first reference, which was timer(0), because you called your function with timer(i), which was calling the first key in the array ids. When you have setInterval in a loop it will keep looping the first setInterval until that is terminated. By putting that i in an anonymous function, each setInterval gets fired.
$(document).ready(function () {
var ids = [];
$("td[id^='time_0']").each(function () {
var i = $(this).attr("id").slice(-1);
ids.push(i);
});
for (i in ids) {
(function(i) { // i needs to be stored into a anonymous function otherwise it gets overwritten
setInterval(function() {
timer(ids[i]); // calling just timer(i) would use array keys, not the actual values - ids[i] means: "give me the value of the key of i"
}, 1000)
})(i);
}
});
Made changes to your Fiddle