Closed rarroyo6 closed 5 years ago
I might be overthinking it, but maybe something like this:
if (sync) {
window.setTimeout(() => updateClock(clock, clockFormat), 60000);
} else {
window.setTimeout(() => {
sync = true;
updateClock(clock, clockFormat);
}, (60 - date.getSeconds()) * 1000);
}
That way the first update happens at zero and then every 60s after that. Otherwise you might end up with it running every second or less if you visited just before the minute turnover. I'll add it to next release, thanks!
That's not necessary (you are overthinking it). The first update will always happen when the page loads and the clock gets displayed, since the "setTimeout" happens after the initial "updateClock". The second update happens at the '00' seconds, because the difference between 60 and the page load seconds is how many seconds are left till '00'. So if the page loads at '55' seconds, the second update will happen 5 seconds later (60 - 55 = 5). Every other update after that, happens at 60 seconds minus the time it took to process the "updateClock" (usually less than 1 second), so it will always update at '00'. I have used that algorithm before several times, plus I made the changes on my local copy, and it works just fine by itself.
If you only sync it initially, then add 60 seconds every time afterwards, you start accumulating the process time of "updateClock" to the 60 seconds on every pass, and eventually it will start to drift off again. This way the "next" update is calculated on every update, so when the the accumulated time adds up to 1 second, it will trigger at 59 seconds, and it will re-sync automatically.
You're right, totally overthinking it. Was thinking it wasn't recalculating the timeout's duration each time. Thanks!
By the way, great add-on. Thanks.
Is your feature request related to a problem? Please describe. Right now the header clock updates every 60 seconds based on the time the page was loaded. This causes the clock to be off sync with the computer clock. And if several tablets are running lovelace with compact-custom-header, their header clock gets updated at different times.
Describe the solution you'd like I propose making the following changes to "compact-custom-header.js": After line 1027 add the line:
let seconds = date.getSeconds();
Then change line 1041 from:window.setTimeout(() => updateClock(clock, clockFormat), 60000);
to:window.setTimeout(() => updateClock(clock, clockFormat), (60 - seconds) * 1000);
This will cause the clock to update at '00' seconds, causing it to change in sync with the computer clock, and with all the other tablets.