Lots of seconds get skipped in countdown timer script

Question

I have made a countdown timer. It uses the date function to get the current time. Then it stores that time in another var. This new var gets changed hours/minutes/seconds, so the format should be the same as the date function.

Then I turn both variables into time since counting, in milliseconds. Then I substract the current date from the new date thingy, to get the time difference from both variables in milli seconds. This should be the difference from the current time to the target time.

After this, I will turn the difference into a readable hours/minutes/seconds timeformat, which will be displayed in a div. Also added a piece of code for allowing an blinking countdown timer, which will give 5 minutes extra time if the timer has run out. (this countdown timer should be part of a larger script, doing things)

BIG PROBLEM IS: The timer works. Does everything I want it to do. But it's very laggy! It skips displaying seconds, even if I set the setTimeout to 10 ms. I also use a clock using the same timer set-up (different vars), and that clock doesn't skip any time, with a setTimeout of 1000 ms...

Tryed to make some calculations smaller, even read alot about the setTimeout and setInterval drift in javascript, but this doesn't explain my current problems. (using setTimeout for a chat, to reload messages every 500 ms, and that works like a charm so my computer/client/server can handle smaller then 1000 ms times)

Skipping seconds happens on IE and firefox. Other countdown timers (which don't do what I want them to do) also run fine in my browser. What's the problem here?!?

https://jsfiddle.net/77cnvq82/ function startMyFunction() { setTimeout(myFunction, 100); }

In this example, the speed has been set to 100ms

Answer 1

The actual issue is in your rounding and math, not in the display code itself.

If you change your display line to:

timerShowRemaining = timerShowRemaining+timerHours+":"+timerMinutes+":"+timerSeconds
 + (new Date());

It will display the current time and you'll see the seconds count up evenly, even as your calculated numbers jerk and lag.