We Keep Coding

Javascript: Implement precise clock

I am implementing a live clock in front-end of a large application. For that I have came up with following approach -
JavaScript
var span = document.getElementById('span');
function time() {
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
span.textContent = h + ":" + m + ":" + s;
}
setInterval(time, 1000);
HTML
<span id="span"></span>
This approach works perfectly fine in isolation, but when this code is integrated in the application which is having several events and function calls, the clock starts lagging by few minutes after say couple of hours until the page is refreshed.
I think this delay is because of setInterval being a web (browser) API and is handled asynchronously it may not execute exactly after 1 second as written in the code every time, if the call stack is not empty after 1 second from time being setInterval is registered due to other function calls/ events present in the call stack of event loop.
So if the page is not refreshed for long time the delay continues to grow. Also the application is written in Angular which is a Single Page application where the page never reloads on navigation because of routing until the page is forcefully refreshed.
So how to build a precise clock in JavaScript which will never delay when integrated in a large application?
Update: Thanks everyone for the response. I think some of you are right, I may be missing some of the details. Actually I was implementing this few days back at work, but have to left this due to some reason and lost track of it. But there was some delay issue for sure working with Date and Timers. Suddenly now this came to my mind and thought asking it here. Extremely sorry for not providing concrete details.
Still I will try to recollect the details and update the question accordingly if possible.

the clock starts lagging by few minutes after say couple of hours until the page is refreshed.
Thats impossible with the code you've shown, new Date should return the correct time, no matter how often you reflect its value to the page.
So if the page is not refreshed for long time the delay continues to grow.
Most browsers today will adjust the timers slightly, so that they are quite accurate on average (e.g. if one timer gets called to late by 1ms, the next will be called 1ms earlier), therefore you can only cause a drift over a longer time if you will leave the page, which will pause the timer. That still shouldn't affect new Date though.
Have a look at the Chromium source

Timers in web browsers get dialled back when the page doesn't have focus. You can't change or prevent that. You're already doing the primary thing that's important: Using the current time to update the clock, so that even if your time function isn't called for three seconds, when it runs it updates with the then-current time, skipping over the intermediate values. (You often see people assuming the timer will run at exactly 1000ms intervals and just adding to the seconds value rather than using the current time, which is incorrect.)
If I were doing this, I'd probably decrease the interval (run the callback more often) and use a chained series of setTimeout rather than a single setInterval, not least because different browsers have historically handled setInterval in different ways.
So for instance:
function time() {
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
span.textContent = h + ":" + m + ":" + s;
setTimeout(time, 250);
}
time();
But if the page is inactive, the clock will get out of date, because the browser will either completely suspend timer execution or at least markedly dial it back. When the page becomes active again, though, hopefully it'll correct itself after no more than 250ms.

Trying to write code that won't do anything until it is a certain time of day, but I get error message "Exceeded maximum stack depth"

This is my code:
var d = new Date();
function myFunction() {
ifNewDay();
}
function ifNewDay() {
var currentTime = d.toLocaleTimeString();
if(currentTime == "3:21:00:00 AM EDT"){
Logger.log("It is 3:21 PM");
} else {
ifNewDay();
}
}
I am trying to write code that will only continue once it hits a certain time, I'm sure there's a way easier way to do this, but I'm brand new. Thanks.

There's a limit on how deep you can recurse, and in you case, that's A LOT of calls in a short period.
When you call a function it gets added to the stack in memory, and there's a limit on how big the stack can be. You can read more here about how it works.
You could use sleep and call that function only every second or so, or at least half a second or something.

It seems like using a time driving trigger is what would work best. Have you looked into triggers?
https://developers.google.com/apps-script/guides/triggers/installable

How to make a very simple countdown timer in Javascript?

I'm making a simple game which generates random numbers and user has to enter a value, if users value matches the random value generated, the user wins basically this is a beginner project. I want to make a small counter so that user has a limited time to put in the value and I want that limited time to show on the screen in a label. Lets say that you have to put the value under 30 secs and the timer will count from 1 to 30 every second. The counting from 1 to 30 will update in the label every second. This is the logic I'm trying to work on right now and I can't figure out any other way... If I've done some mistake in code please comment or if you have much more simpler way please post it down below. (pls dont vote down im at threat of account suspension)
Heres the part of my timer code:
if(timer <= 30)
{
for(var i = 0;i >= 30;i++)
{
setInterval(null,1000);
timer++;
document.getElementById("counter").innerHTML = timer+" seconds wasted";
}
alert("Time is over, you lost by "+s);
}

You could create a recursive function.
Say var countDown function(){ time = time--;
setTimeout(countDown, 1000);}
Then you need a variable time that is accessible for the countDown function.
var time = 30;
In the countDown function you could create an updateTimeElement.
Try it out.

The setInterval function has 2 parameters, a callback (an anomynous function in javascript thats triggered) and the milliseconds between each trigger of the interval.
What you are doing in your script is making an interval with nothing to do each second (this runs indefinately), then increment the timer integer and updating the DOM. However, this all executes within seconds.
I'd suggest (before you use a function) you look at the documentation to see how you can improve your script to work as you intent to ;-) Here are a few links that might help you get started:
http://www.w3schools.com/js/js_timing.asp
https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/
I wont be doing the work for you, since this is a good exercise for a beginner programmer ;-)
If you can't figure it out, leave a comment below this answer and I'll get back to you to help you if you need further assistance.

How do I get this code to repeat without refreshing page? setInterval? Other?

Hello I've written a bit of Javascript that I need to get to run every second. It is actually a Flash design of the sun that is supposed to change with the actual position of the sun outside.
this.addEventListener("tick",fl_RotateContinuously.bind(this));
var currentdate = new Date();
function fl_RotateContinuously(){
this.sky1.rotation=(currentdate.getHours()*15-90)+(currentdate.getMinutes()*3/12)+(currentdate.getSeconds()*3/720);
}
The above code works and displays the sun in the correct position. However, I need the code to run every second, otherwise the user needs to refresh the HTML page to see the new position of the sun. I've tried using the setInterval() code to get the function to run every second, however I must not be writing it correctly because it will not work. Perhaps this isn't even the correct way to do it at all... Can anyone show me the correct way to repeat this function every second?

Would you mind showing your setInterval approach?
One way of implementing it would be:
window.setInterval(function() { fl_RotateContinuously(); }, 1000); //1000 (ms) = 1s

The way you use the setInterval Function is
setInterval(functionName, 1000)
The first parameter is the function name without calling it, and the second parameter is the time in milliseconds that you want it to wait to call the function again.
https://jsfiddle.net/rhbritton/01t8yq2h/

Alert box that pops up at certain time on Javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I am using Javascript and I made it so that it records the number on the getTime() method, and it will add a certain number of milliseconds to that. Then I want an alert box to pop up once the new number of milliseconds has passed since January 1, 1970 at midnight.
I am pretty new at programming, so it would be helpful if you could explain how it works too.
Is this possible?

setTimeout() starts a process that will call a function asynchronously every x number of milliseconds. Date() gets the current time and date. Also, I added another little bit to make it where
Edit 1
In HTML/JavaScript you can either embed the JavaScript in the webpage or in a separate script that is interpreted during the page load. Here, we are just going to embed it in the HTML for brevity.
With respect to your question (If I'm understanding correctly), you want to be able to record what time it is and then tell how long it has been since then. In the <script> tag, we have a global variable startTime that gets set to the epoch of the program being run. Date() gets what time it is. main() is what gets run after our page gets loaded so the very first thing to happen is startTime gets set to the current time with Date() and another special function setTimeout() gets started.
setTimeout() takes two parameters, a function reference and a duration. After being called, it schedules for the function it was given to be fired after a duration has passed. In our case, we tell it to fire getTimePassage() after 5000 milliseconds.
What getTimePassage() does is gets the current time again, through Date() and then stores that time in currDate. Then we store the difference between the two in timeDiff with the call var timeDiff = (currDate - startTime); After that, it's a piece of cake to output the answer to whatever format you want whether it be a <div>, the console, an alert, or a popup. Here we do all of them.
The last important thing is how we reschedule getTimePassage() again using setTimeout() This makes it so that we keep updating how much time has passed during our run.
Edit 2
but what would I do to start and stop the timer?
I've added two buttons to the page that will start and stop the timer. You need to add a flag, shouldRestartTimer which will tell the function to not continue remaking the timer. Additionally, I've refactored main and separated the start logic into startGetTimePassage() and stopGetTimePassage() which start and stop the timer respectively. At the program start, main() sets the start time and fires off the startGetTimePassage().
Additionally, I've added 2 buttons and 4 check boxes to the HTML page that will let you select where your time gets displayed as well as allow you to stop and start your timer. When the page loads, it's still started, but now you can start it up again after stopping. I would recommend as an exercise you try to fix the bug that follows with this: If the timer is already running, and you press start several setTimeouts() are ignited which will all send time to the selected output and pressing stop won't fix this.
<html>
<head>
<title>Timer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
// I'm the time of the start of this program
var startTime;
// I'm a global variable that holds a handle to the setTimout() object
var timer;
// I say whether or not we should keep ticking
var shouldRestartTimer = true;
// I get the current time and subtract it from the start time
function getTimePassage() {
// I'm the div that is going to print the answer
var timeDiv = document.getElementById("time");
// I'm the current time
var currDate = new Date();
// I determine how much time has passed
var timeDiff = (currDate - startTime);
// I'm the answer to get printed
var timeString = "Time Passed: " + timeDiff;
// I put the anser into the HTML after subtracting
// the start time from the current time
if (document.getElementById("shouldDiv").checked) {
timeDiv.innerHTML = timeString;
}
// If I were uncommented I would spawn an alert box
if (document.getElementById("shouldAlert").checked) {
alert(timeString);
}
// I'm a popup that does what you expect
if (document.getElementById("shouldPopup").checked) {
var timeWindow = window.open("", "", "width=200,height=200");
timeWindow.document.write(timeString);
}
// I'm going to tell the same thing to console
if (document.getElementById("shouldConsole").checked) {
console.log(timeString);
}
// I start this all over again
timer = setTimeout(getTimePassage, 5000);
}
function startGetTimePassage() {
shouldRestartTimer = true;
// I make a timer that will run "getTimePassage" every 5000 millis
timer = setTimeout(getTimePassage, 5000);
}
// I stop the timout
function stopGetTimePassage() {
shouldRestartTimer = false;
clearTimeout(timer);
}
// I get everything ready
function main() {
// I'm setting the time that this all began
startTime = new Date();
// I start the timer and tell it to repeat
startGetTimePassage();
}
</script>
</head>
<!--I start the whole process-->
<body onload="main();">
<!--I'm a div that is going to store text to not be irritating-->
<div id="time">Time</div>
<!--I'm a check box that will make the time go to an alert-->
<input type="checkbox" id="shouldAlert">Alert<br>
<!--I'm a pre-selected check box that will make the time go to the div above-->
<input type="checkbox" id="shouldDiv" checked>Div<br>
<!--I'm a check box that will make the time to a separate pop-up window-->
<input type="checkbox" id="shouldPopup">Pop-up<br>
<!--I'm a check box that will make the time go to the console-->
<input type="checkbox" id="shouldConsole">Console<br>
<!--I'm a button to start the timer if you stop it-->
<button onclick="startGetTimePassage();">Start</button>
<!--I'm a button to stop a timer after it's started-->
<button onclick="stopGetTimePassage();">Stop</button>
</body>
</html>