Javascript timer issue

Question

Try to make a timer like following way:

HTML:

<div id="timer">
     <span id="minute" class="dis">00</span> :
     <span id="second" class="dis">00</span> :
     <span id="milisecond" class="dis">00</span>
 </div>

 <input type="button" value="Start/Stop" id="startStop" />
 <input type="button" value="Reset" id="reset" />

jQuery:

 var a = false,
         t = null,
         ms = 0,
         s = 0,
         m = 0,
         dl = 10,
         now = null,
         before = new Date(),
         El = function(id) { return document.getElementById(id);};

     function dsp() {
         if(ms++ == 99){
              ms = 0;
             if(s++ == 59) {
                 s = 0;
                 m++;
             } else s = s;
         } else ms = ms;    
         El('milisecond').innerHTML = ms
         El('second').innerHTML = s < 10 ? '0' + s : s;
         El('minute').innerHTML = m < 10 ? '0' + m : m;
     }

     function r() {
         a = true;
         var els = document.getElementsByClassName('dis');
         ms = s = m = 0;
         sw();        
         for(var i in els)  {
             els[i].innerHTML = '00';    
         }
     }

     function sw() {
         a ? clearInterval(t) : t = setInterval(dsp, dl);
         a = !a;
     }
     El('startStop').addEventListener('click', sw, true);
     El('reset').addEventListener('click', r, true);

It works just fine. But problem is that it stop execution when window switch or tab change happen. Before submit this question I read this thread, but fail to implement it in my snippet.

Please help me with some solution or suggestion..

Here is the fiddle

What if you just capture the start time, and at every interval, calculate the difference between now and the start time. Then it doesn't matter if your interval was running after you switched, because it'll be up to date as soon as the interval triggers again. — Marc, Apr 22 '12 at 17:49

score 2 · Accepted Answer · edited May 23 '17 at 12:12

Capture the start time (see Marc's comment) and keep track of previous runs (offset):

var a = false;
var dl = 10;
var El = function(id) { return document.getElementById(id);};
var start = null; // starting time of current measurement
var offset = 0;   // offset for previous measurement

function dsp() {
    var tmp = new Date(new Date() - start + offset ); // calculate the time
    var ms = tmp.getMilliseconds();
    var m = tmp.getMinutes();
    var s = tmp.getSeconds();
    El('milisecond').innerHTML = ms;
    El('second').innerHTML = s < 10 ? '0' + s : s;
    El('minute').innerHTML = m < 10 ? '0' + m : m;
}

function r() {
    a = true;
    var els = document.getElementsByClassName('dis');    
    sw();
    offset = 0; // Clear the offset
    for(var i in els)  {
        els[i].innerHTML = '00';    
    }
}

function sw() {
    if(a){
    // If the timer stops save the current value
        offset += (new Date()) - start;
    }else
        start = new Date();
    a ? clearInterval(t) : t = setInterval(dsp, dl);
    a = !a;
}
document.getElementById('startStop').addEventListener('click', sw, true);
document.getElementById('reset').addEventListener('click', r, true);

JSFiddle

@Zeta Nice. I was too lazy to actually code it up, but I like what you did. — Marc, Apr 22 '12 at 19:16

Javascript timer issue

1 Answers1