Adding milliseconds to timer in html

Question

Is there any way i could add milliseconds to my timer?

I'm currently using this timer but its only counting in seconds.

var count=99;
    var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer(){
      count=count-1;

      if (count <= 0){
        clearInterval(counter);
        return;
      }
      document.getElementById("timer").innerHTML=count + " seconds"; // watch for spelling
    }

Thanks

What do you mean by "add milliseconds"? setInterval takes in a number of milliseconds before it fires off your function. — Shriike, Oct 17 '14 at 19:42
change `setInterval(timer, 1000);` to `setInterval(timer, 1);` to run `timer()` every millisecond — mswieboda, Oct 17 '14 at 19:43
I would like to show milliseconds on my timer as well. Its currently showing up as 60 seconds. I would like it to be 60:00 seconds — User358218, Oct 17 '14 at 19:43

Alnitak · Accepted Answer · 2014-10-17T20:04:15.993

5

Timers won't run with millisecond accuracy - not only is that below the standard JS minimum timeout, timer events can queue up and all sorts of other issues. In any event (no pun intended) you can't actually see a timer count up 1000 times a second.

Just use window.requestAnimationFrame instead and show the difference between the time passed to that function and the reference start time of the timer.

var timer = document.getElementById('timer');

var expires = +new Date() + 10000;

(function update() {
  var now = +new Date();
  var togo = expires - now;
  if (togo > 0) {
    timer.innerHTML = togo;
    window.requestAnimationFrame(update);
  } else {
    timer.innerHTML = 0;
  }
})();

<div id="timer"></div>

edited Oct 17 '14 at 20:04

answered Oct 17 '14 at 19:45

Alnitak

334,560
70
407
495

Hi Altinak, I'm looking to do a simple countdown timer with milliseconds – User358218 Oct 17 '14 at 19:49
ok - code changed to show a countdown - converting to MM:SS.sss left as a trivial exercise for the reader. – Alnitak Oct 17 '14 at 19:52
If you don't mind answering, what is the `+` for in `+new Date()`. What does it do? – Weafs.py Oct 17 '14 at 19:55
1

It just converts the date to a millisecond integer. On newer browsers `Date.now()` is preferred (and faster) – Alnitak Oct 17 '14 at 19:56
Well, it would be unusual to accept *and* downvote! ;-) – Alnitak Oct 17 '14 at 19:59
1

I think it's probably because the counter stops before reaching `0`. – Weafs.py Oct 17 '14 at 19:59
2

@chipChocolate.py that's a natural limitation of the timer accuracy - you'll only get an update roughly once every 16ms and doesn't count down one at a time. To fix it you'd have to explicitly set the displayed value to zero by hand at the end of the loop. – Alnitak Oct 17 '14 at 19:59
Yea, I know. It can't be that accurate. – Weafs.py Oct 17 '14 at 20:00

score 0 · Answer 2 · answered Oct 17 '14 at 23:52

Always late to the party but here's one I made earlier. Seems a shame to waste it.

http://jsfiddle.net/dy25nce7/

function countdownTimer(el,duration){
    var exp = Date.now() + duration;//expires in now + duration milliseconds

    //callback using window.requestAnimationFrame if available else setTimeout at 60fps:
    var rAF = window.requestAnimationFrame || function(callback){window.setTimeout(callback,1000/60);};

    //left-pad with leading zeros
    function pad(n,s){
        s = s||2;
        return ("00000"+n).substr(-s);
    }

    //The loopy bit:
    //note the use of a bitwise right-shift to convert to int (http://jsperf.com/number-vs-parseint-vs-plus/39)
    (function update() {
      var n = Date.now(),
          e = (exp-n),
          ms= (e%1000),
          s = ((e/1000)%60) >> 0,
          m = ((e/(1000*60))%60) >> 0,
          h = ((e/(1000*60*60))%24) >> 0;
      if (e > 0) {
          el.innerHTML = pad(h)+":"+pad(m)+":"+pad(s)+":"+pad(ms,3);
          rAF(update);
      } else {
          el.innerHTML = "00:00:00:000";
      }
    })();//IIFE (Immediately-Invoked Function Expression)

};

countdownTimer(document.getElementById('timer'),10000);

Adding milliseconds to timer in html

2 Answers2

Linked

Related