First time using moment.js and I am struggling to implement a clock to show the time in CET and PST. My code is as follows:
function cetClock() {
var cet = moment.tz("Europe/London");
var today = new Date(cet);
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkCetTime(m);
s = checkCetTime(s);
$rootScope.cetTime = h + ":" + m + ":" + s;
var t = setTimeout(cetClock, 300);
}
function checkCetTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
cetClock()
<div class="col-md-6">
<p>CET: {{$root.cetTime}}</p>
</div>
The issue I have is that the time in the view is only being updated every 4-5 seconds. If I log the h, m, s within the function, it shows every 500 milliseconds the time being updated.
Question
Why is the clock in the viiew failing to update every second?
I suggest using $timeout instead of setTimeout which will automatically trigger a digest cycle.
Related
I have a function called startTime() which gets the current time with h set to the hour and m set to minutes. The error with this code is after I exported my javaScript side function to node with the specific variables when I call back h and m their values don't get updated with the startTime function they are stuck to the values they first had when I run startTime in the javascript side. I tried to setInterval to keep on calling startTime every 500 milliseconds but that didn't fix it.function refreshStartTime() {setInterval(startTime, 500);} .I also tried debugging it with an alert on the HTML side which printed the correct/constantly updating values of h and m.```function testAlert(){alert(h + ":" + m)} .Do you have any idea why it's not updating on the node side or how to solve this issue? Thanks in advance.
JavaScript side
function startTime() {
var today = new Date();
globalThis.h = today.getHours();
m = today.getMinutes();
var s = today.getSeconds();
globalThis.m = checkTime(m);
s = checkTime(s);
var t = setTimeout(startTimeAudio, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
startTime()
module.exports = {
startTime,
h,
m,
};
Node side
const qw = require('./index.js');
const timeH = qw.h;
const timeM = qw.m;
Change your module.exports to
module.exports = {
startTime,
...globalThis
}
please look to my code to know the problem !!!
this is the problem ?
why they used setTimeout and it execute 1 time only , and the clock need some method execute continuously like setInterval ? even setInterval work in this code , but my problem is setTimeout execute 1 time only why it's work here in this code ?
why it's 500 milliseconds while 1 second = 1000 ?
help me please
i changed setTimeout with setInterval and both worked this make the problem bigger how both do the same thing in this example even they are not the same ?
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
It acts like setInterval because it calls himself every 0.5 sec recursively: setTimeout(startTime, 500)
You are right, it runs every ~0.5 sec and not 1 sec as areal clock. Maybe they thought that the logic in startTime will take 0.5 sec so together it will take 1 sec, but, obviously it's not true.
I know this isn't going to help you understand so I'll break it down.
I have a webpage that has an interval for the time, this time is translated into an hour and that loads a audio file. The problem being that the interval reloads the audio every second and I only want it to interval based on the hour and the clock to work as intended. I have it set up like this.
The basic of it is that I have a page loading stuff based on the time of day and I need a way to edit the time live with some function and change the elements. If there is a better way to do this, I am open to suggestions.
note: i can not use jquery
//interval//
var myVar = setInterval(function(){ myTimer() }, 1000);
//get the time//
function myTimer() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var time = h + ":" + m + ":" + s;
document.getElementById('time').innerHTML = time;
mod_time(h,m,s)
}
// mod the time //
function mod_time(h,m,s) {
var x = 0;
if(x == 1){
var h = h - h + 2
}
if(x == 2){
var h = h - h + 3
}
else{
var h = h;
}
//applying just the hours//
apply_mod_time(h)
//displaying the full modded time for debugging//
var t_str = h + ":" + m + ":" + s;
document.getElementById('time2').innerHTML = t_str;
}
//playing sound based on the hour//
function apply_mod_time(h) {
if (h==1) {
document.getElementById("myAudio").src = "moo.mp3";
}
}
Add another variable that specifies the current hour. When you execute the interval every second, see if h !== hourVariable. If they do not match, load the audio file and update the hourVariable to equal h.
I need some advice and logic in my problem.
So, I have an entrydate, from database, then the running current date, and a value of 10(double type in database). So, I know how to calculate the diff of the entrydate and current date, right. So I convert it to seconds then to a number(9.23165).
|Entry |Current Date|Diff(in number)|
|2:00:00 PM |2:30:00 PM | 5.00(Sample)|(First User)
So basically, as current date goes on, can PHP show the deduction on real time? Or I need to refresh? What I need is for it to display the deduction without refreshing. So basically, I need to know what I have to do. Maybe javascipt and ajax?
What you would need are a few Javascript/jQuery functions to update the browser in real time.
var myTimer;
var startTime;
function startTimer() {
stopTimer(); // Reset
startTime = new Date(); // Save to calculate difference
myTimer = setInterval(clockTicking, 1000);
}
function stopTimer() {
clearInterval(myTimer);
}
function clockTicking() {
var now = new Date();
var timeDiff = new Date(now - startTime); // constructor uses UTC, so use UTC date functions from here on
var hours = (timeDiff.getUTCHours() < 10) ? '0' + timeDiff.getUTCHours() : timeDiff.getUTCHours();
var mins = (timeDiff.getUTCMinutes() < 10) ? '0' + timeDiff.getUTCMinutes() : timeDiff.getUTCMinutes();
var secs = (timeDiff.getUTCSeconds() < 10) ? '0' + timeDiff.getUTCSeconds() : timeDiff.getUTCSeconds();
$("<element-where-you-display>").html(hours + ':' + mins + ':' + secs);
}
In Javascript you can call startTimer() to kick it off.
I'm trying to write a script to display the current time on a page every minute on the status bar. However nothing shows up on the bar and I have no idea what is wrong.
function display_time(){
var d = new Date();
var h = d.getHours(); // Extract hours
var m = d.getMinutes(); // Extract minutes
var ampm = (h >= 12)?"PM":"AM" // Convert to 12 hr format
if (h > 12) h -= 12; // Next 4 lines; convert time to 12hr format
if (h==0) h = 12;
if (m < 10) m = "0" + m;
var t = h + ':' + m + ' ' + ampm;
defaultStatus = t;
// Repeat function every minute
setTimeout('display_time()', 60000);
}
And Finally I call it as the page loads with <body onload= 'display_time();'>
The time however doesn't show in the status bar of any browser. Any thoughts?
Use window.status instead of defaultStatus. But please be aware that you can't change the status bar in some browsers.