Timer not accurate

Question

I am building an activity timer, but the code I have is not working properly. The timer is going ~40% faster than real time. What's going wrong?

var sec = 00;
var min = 00;
var hr = 00;
var t;
var timer_is_on = 0;

function timedCount() {

  if (min == 0) {
    min = 1;
  }
  document.getElementById('seconds').value = sec;

  document.getElementById('minutes').value = min;
  $('.node-form .form-item:nth-child(4) input').val(min);

  document.getElementById('hours').value = hr;
  $('.node-form .form-item:nth-child(3) input').val(hr);

  sec = sec + 1;
  if (sec == 60) {
    sec = 0;
    min = min + 1;
    if (min == 60) {
      min = 1;
      hr = hr + 1;
    }
  }
  t = setTimeout("timedCount()", 1000);
}

function doTimer() {
  if (!timer_is_on) {
    timer_is_on = 1;
    timedCount();
  }
}

function stopCount() {
  clearTimeout(t);
  timer_is_on = 0;
}

function resetCount() {
  stopCount();
  sec = 0;
  min = 0;
  hr = 0;
  document.getElementById('hours').value = 00;
  $('.node-form .form-item:nth-child(3) input').val('0');
  document.getElementById('minutes').value = 00;
  $('.node-form .form-item:nth-child(4) input').val('0');
  document.getElementById('seconds').value = 00;
}

function putInTimelog() {
  // Put hours
  var hourItems = [];
  var hourFields = document.getElementById("node-form").getElementsByTagName("input");
  for (var i = 0; i < hourFields.length; i++) {
    //omitting undefined null check for brevity
    if (hourFields[i].id.lastIndexOf("edit-field-timelog-hours-0-value-", 0) === 0) {
      hourItems.push(hourFields[i]);
    }
  }
  var hourField = 'edit-field-timelog-hours-0-value-';
  hourField = hourField.concat(hourItems.length);
  document.getElementById(hourField).value = hr;
  // Put minutes
  var minuteItems = [];
  var hourFields = document.getElementById("node-form").getElementsByTagName("input");
  for (var i = 0; i < hourFields.length; i++) {
    //omitting undefined null check for brevity
    if (hourFields[i].id.lastIndexOf("edit-field-timelog-minutes-0-value-", 0) === 0) {
      minuteItems.push(hourFields[i]);
    }
  }
  var minuteField = 'edit-field-timelog-minutes-0-value-';
  minuteField = minuteField.concat(minuteItems.length);
  alert(minuteField);
  alert((minuteField).length);
  document.getElementById(minuteField).value = min;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <span class="timer-title"><strong>Activity timer</strong></span>h:
  <input id="hours" readonly="readonly" size="2" type="text" />&nbsp;m:
  <input id="minutes" readonly="readonly" size="2" type="text" />&nbsp;s:
  <input id="seconds" readonly="readonly" size="2" type="text" /><span class="timer-buttons"><input onclick="doTimer()" type="button" value="Start" /> <input onclick="stopCount()" type="button" value="Stop" /> <input onclick="resetCount()" type="button" value="Reset" /> </span>
</form>

View on JSFiddle

`setTimeout` is not guaranteed to execute after the exact number of milliseconds. It's more of a suggestion — zzzzBov, Sep 07 '16 at 20:28
`setTimeout` isn't accurate always, to get time, you can use `Date()` object and then calculate difference, between initial and latest value. — Prateek Gupta, Sep 07 '16 at 20:30

Ronnie Royston · Answer 1 · 2016-09-08T22:00:21.287

-2

clock.js is my repo that might help when used in conjunction with window.setInterval(). Working example included.

Add <script src="https://rack.pub/clock.min.js"></script> to your HTML then call clock.now --> 1462248501241 each time you want a time snapshot. You can add and subtract intuitively from there.

The actual js looks like:

var clock = (function() {

    // object to expose as public properties and methods such as clock.now
    var pub = {};

    //clock.now
    Object.defineProperty(pub, "now", {
        get: function () { 
            return Date.now();
        }
    });

    //API
    return pub;
}());

    var doc = document;
    var el = doc.getElementById('output');
    window.setInterval(function(){
      /// call your function here
      el.innerHTML = clock.what.time(clock.now);
      
    }, 500);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rack.pub/clock.min.js"></script>
    <h2 id='output'></h2>

edited Sep 08 '16 at 22:00

answered Sep 07 '16 at 20:31

Ronnie Royston

16,778
6
77
91

2

If you imagine a future where that link doesn't work, this answer becomes worthless. – zzzzBov Sep 07 '16 at 20:32
Yes, and lets imagine the repo is deleted or moved, making the old link no longer work... – zzzzBov Sep 07 '16 at 20:39
1

Also, given that it appears to be *your* repo, please include an acknowledgement of this so that your answer doesn't read like spam. – zzzzBov Sep 07 '16 at 20:40
1

This doesn't answer OP: "The timer is going ~40% faster than real time. What's going wrong?" – PeeHaa Sep 07 '16 at 20:47
OK got it thank you – Ronnie Royston Sep 07 '16 at 20:47
hm, so how should new code look like? should clock.js be used or ? – Michael Sep 07 '16 at 20:58
Again ^ doesn't answer the question on the site. – PeeHaa Sep 08 '16 at 15:15
1

The problem is that you didn't actually answered the question (which is what we expect from answer on SO). You just shared a link to some repo. Which might be loosely *related*, but doesn't answer the question in OPs question. – PeeHaa Sep 08 '16 at 21:43

Timer not accurate

1 Answers1