How do you create multiple timers on one page that operate independently -- javascript?

I wrote a timer object that works like a stop watch (click once and the timer starts, click again and it stops, double click and it resets). Everything works fine if I only activate one timer. When I activate a second timer, the first one stops working. When I activate a third timer, the second stops working.

I dynamically created each timer object to give each timer it's own name (window[timer1]). But they are not acting independently. What am I missing to make the timer objects operate independently of each other?

function Clock() {
  this.element = "";
  this.minute = 0;
  this.toggle = true;
  this.active = false;
  this.startClock = startClock;
  this.stopClock = stopClock;

function startClock() {
  minute = this.minute;
  element = this.element;
  minute = checkTime(minute);
  document.getElementById(element).innerHTML = minute;
  minute++;
  this.minute = minute;
  t=setTimeout(function(){startClock()},1000);
  this.counter = t;
}

function checkTime(i) {
    if (i<10)
    {
      i="0" + i;
    }
  return i;
}

function stopClock() {
  document.getElementById(element).innerHTML = this.minute;
  clearTimeout(t);
}

}

function initClock(ele) {
  value = document.getElementById(ele).innerHTML;

  if (typeof window[ele] == 'undefined') {
    window[ele] = new Clock();
    window[ele].element = ele;
  }

  if (value == "start" || window[ele].active == false) {
    window[ele].toggle = true;
  } else {window[ele].toggle = false;}

  if (window[ele].toggle) {
    window[ele].toggle = false;
    window[ele].active = true;
    if (value == "start") {
      window[ele].minute = 0;
    }
    wind开发者_开发技巧ow[ele].startClock();
  }
  else {
    window[ele].toggle = true;
    window[ele].active = false;
    window[ele].stopClock();
  }

}

function clearClock(ele) {
  document.getElementById(ele).innerHTML= "start";
  this.element = "";
  this.minute;
  this.toggle;
  this.counter;
}

You have some scope issues. E.g.

function startClock() {
  minute = this.minute;
  element = this.element;
  minute = checkTime(minute);
  document.getElementById(element).innerHTML = minute;
  minute++;
  this.minute = minute;
  t=setTimeout(function(){startClock()},1000);
  this.counter = t;
}

This will declare minute, element and t in global scope, thus every call to startClock will overwrite these values.

Here is an refactored version:

function Clock(element) {
  this.element = element;
  this.minute = 0;
  this.toggle = true;
  this.active = false;
}

Clock.prototype = {
  startClock: function() {
      this.minute = this.checkTime(this.minute);
      this.element.innerHTML = this.minute;
      this.minute++;
      var that = this;
      this.counter = setTimeout(function(){that.startClock()},1000);
  },

  checkTime = function(i) {
        if (i<10) {
           i="0" + i;
        }
        return i;
  },

  stopClock: function() {
      this.element.innerHTML = this.minute;
      clearTimeout(this.counter);
  },

  clearClock: function() {
      this.element.innerHTML= "start";
      this.element = "";
      this.minute = 0;
      this.toggle = true;
      this.counter = null;
  }
}

function initClock(ele) {
  value = document.getElementById(ele).innerHTML;

  if (typeof window[ele] == 'undefined') {
    window[ele] = new Clock(document.getElementById(ele));
  }

  if (value == "start" || window[ele].active == false) {
    window[ele].toggle = true;
  } else {window[ele].toggle = false;}

  if (window[ele].toggle) {
    window[ele].toggle = false;
    window[ele].active = true;
    if (value == "start") {
      window[ele].minute = 0;
    }
    window[ele].startClock();
  }
  else {
    window[ele].toggle = true;
    window[ele].active = false;
    window[ele].stopClock();
  }

}

Read more about Objects in JavaScript.

Reviving an old post (don't flame me please)...

I reworked and offer a complete solution, with formatting & milliseconds.

Kudos goes to:

• Felix Kling and OP for original code & thread
• Ildar Shaimordanov for "[document.insertAfter]" (used for DOM 'laps') code.google.com/p/jsxt/source/browse/trunk/js/web/document.insertAfter.js?r=220
• Team that created phpjs.org/functions/sprintf:522
• Me

I went generic with window.onload - JQuery users be sure to use .ready( ) API handler.

<html>
<head>
    <script type="text/javascript">
        function Clock(id) {
            this.id = id;
            this.element = document.getElementById(id);
            this.element.innerHTML = "00:00:00.000";
            this.timeout = 69; //1 = much cpu usage; 1000 = 1 second; 20-70 seem ok.
            this.oStartDate=0;
            this.instance=0;
        }
        Clock.prototype = {
            readyFor: function(looping) {
                if ( (this.instance == 1) && (looping == true) ) {
                    return true;
                } else if ( (typeof looping == 'undefined') && (this.instance == 0) && (this.element.innerHTML == "00:00:00.000") ){ 
                    // Initial Call Validated
                    this.instance = 1;
                    looping = true;
                    this.oStartDate = new Date(); 
                    //this.oStartDate.setSeconds(this.oStartDate.getSeconds() - 55);
                    //this.oStartDate.setMinutes(this.oStartDate.getMinutes() - 59);
                    //this.oStartDate.setHours(this.oStartDate.getHours() - 23);    
                    return true;                    
                }
                // Subsequent calls will fail (not allowing duplicate parallel runs on same start button)
                return false;
            },
            startClock: function(looping) {
                if ( this.readyFor(looping) ) {
                    this.element.innerHTML = this.formatClock();
                    this.loop = setTimeout( this.startClock.bind(this, true), this.timeout );
                }
            },
            formatClock: function() {
                var oNowDate = new Date();
                var Milliseconds = (oNowDate.getTime() - this.oStartDate.getTime());
                return sprintf("%02d:%02d:%02d.%03d", 
                    (Milliseconds / (1000 * 60 * 60) % 24), 
                    (Milliseconds / (1000 * 60) % 60), 
                    ((Milliseconds / 1000) % 60),  
                    ((Milliseconds / 1000) % 1)*1000);

            },
            lapClock: function() {
                var mainDiv = document.getElementById(this.id);
                var newDiv = document.createElement("div");
                newDiv.className="lap";
                var newContent = document.createTextNode(this.formatClock());
                newDiv.appendChild(newContent);
                document.body.insertAfter(newDiv, mainDiv);
            },
            resetClock: function() {
                this.element.innerHTML = "00:00:00.000";
                this.oStartDate = 0;
                this.instance=0;
                this.loop = null;
            },          
            stopClock: function() {
                clearTimeout(this.loop);
                this.oStartDate = 0;
                this.instance=0;
                this.loop = null;
            }
        }
        function initClock(id) {
            value = document.getElementById(id).innerHTML;
            if (typeof window[id] == 'undefined') {
                window[id] = new Clock(id);
            }
        }
        window.onload = function() {
            initClock("clock1");
            initClock("clock2");
            initClock("clock3");
        }

        function sprintf(){var a=/%%|%(\d+\$)?([-+\'#0 ]*)(\*\d+\$|\*|\d+)?(\.(\*\d+\$|\*|\d+))?([scboxXuidfegEG])/g;var b=arguments,c=0,d=b[c++];var e=function(a,b,c,d){if(!c){c=" "}var e=a.length>=b?"":Array(1+b-a.length>>>0).join(c);return d?a+e:e+a};var f=function(a,b,c,d,f,g){var h=d-a.length;if(h>0){if(c||!f){a=e(a,d,g,c)}else{a=a.slice(0,b.length)+e("",h,"0",true)+a.slice(b.length)}}return a};var g=function(a,b,c,d,g,h,i){var j=a>>>0;c=c&&j&&{2:"0b",8:"0",16:"0x"}[b]||"";a=c+e(j.toString(b),h||0,"0",false);return f(a,c,d,g,i)};var h=function(a,b,c,d,e,g){if(d!=null){a=a.slice(0,d)}return f(a,"",b,c,e,g)};var i=function(a,d,i,j,k,l,m){var n;var o;var p;var q;var r;if(a=="%%"){return"%"}var s=false,t="",u=false,v=false,w=" ";var x=i.length;for(var y=0;i&&y<x;y++){switch(i.charAt(y)){case" ":t=" ";break;case"+":t="+";break;case"-":s=true;break;case"'":w=i.charAt(y+1);break;case"0":u=true;break;case"#":v=true;break}}if(!j){j=0}else if(j=="*"){j=+b[c++]}else if(j.charAt(0)=="*"){j=+b[j.slice(1,-1)]}else{j=+j}if(j<0){j=-j;s=true}if(!isFinite(j)){throw new Error("sprintf: (minimum-)width must be finite")}if(!l){l="fFeE".indexOf(m)>-1?6:m=="d"?0:undefined}else if(l=="*"){l=+b[c++]}else if(l.charAt(0)=="*"){l=+b[l.slice(1,-1)]}else{l=+l}r=d?b[d.slice(0,-1)]:b[c++];switch(m){case"s":return h(String(r),s,j,l,u,w);case"c":return h(String.fromCharCode(+r),s,j,l,u);case"b":return g(r,2,v,s,j,l,u);case"o":return g(r,8,v,s,j,l,u);case"x":return g(r,16,v,s,j,l,u);case"X":return g(r,16,v,s,j,l,u).toUpperCase();case"u":return g(r,10,v,s,j,l,u);case"i":case"d":n=+r|0;o=n<0?"-":t;r=o+e(String(Math.abs(n)),l,"0",false);return f(r,o,s,j,u);case"e":case"E":case"f":case"F":case"g":case"G":n=+r;o=n<0?"-":t;p=["toExponential","toFixed","toPrecision"]["efg".indexOf(m.toLowerCase())];q=["toString","toUpperCase"]["eEfFgG".indexOf(m)%2];r=o+Math.abs(n)[p](l);return f(r,o,s,j,u)[q]();default:return a}};return d.replace(a,i)}
        if(!document.insertAfter){document.insertAfter=function(a,b){return(b=b.nextSibling)?this.insertBefore(a,b):this.appendChild(a)};if(this.Node){Node.prototype.insertAfter=document.insertAfter}}
    </script>
    <style type="text/css">
        body, html{font:1em normal monospace;}
        div.lap{float:left;background:#fca;padding:0 0.75em;}
        div.fl{float:left;}
        div.clock{background:#009;color:#eec;padding:0 0.75em;}
        div.cl{clear:both;}
    </style>
</head>
<body>
    <div class="fl"><input type="button" onclick="window['clock1'].startClock();" value="start"><input type="button" onclick="window['clock1'].lapClock();" value="lap"><input type="button" onclick="window['clock1'].stopClock();" value="stop"><input type="button" onclick="window['clock1'].resetClock();" value="reset"></div><div id="clock1" class="fl clock">ERROR</div><div class="cl"></div>
    <div class="fl"><input type="button" onclick="window['clock2'].startClock();" value="start"><input type="button" onclick="window['clock2'].lapClock();" value="lap"><input type="button" onclick="window['clock2'].stopClock();" value="stop"><input type="button" onclick="window['clock2'].resetClock();" value="reset"></div><div id="clock2" class="fl clock">ERROR</div><div class="cl"></div>
    <div class="fl"><input type="button" onclick="window['clock3'].startClock();" value="start"><input type="button" onclick="window['clock3'].lapClock();" value="lap"><input type="button" onclick="window['clock3'].stopClock();" value="stop"><input type="button" onclick="window['clock3'].resetClock();" value="reset"></div><div id="clock3" class="fl clock">ERROR</div><div class="cl"></div>
</body>
</html>

I minified] (jscompress.com) the code for simplicity - use jsbeautifier.org to 'unminify'.

Great tool for AJAX time studies / AJAX stopwatch

Warning! Bringing the timeout to "1" will increase CPU significantly. I found a happy median around 35-80 ms.

Try it now! - This works with modern browsers supporting ECMAScript 5

Try it now! - This works with older browsers using JQuery proxy in lieu of bind

This will run two separate instances of second timers from 0- well, forever. Just modify it to what you need.

<head>
<script type="text/java">
<!--
 var t;
 var c0;
 var c1;
 function timer()
 {
    document.getElementById('ticker0').value=c0;
    c0=c0+1;

    document.getElementById('ticker1').value=c1;
    c1=c1+1;

    t=setTimeout(\"timedCount()\",1000);
 }
-->
</script>
</head>
<body onload="timer()">
 <form>
  <input type="text" id="ticker0">
  <input type="text" id="ticker1">
 </form>

etc...

Doing it in reverse count down just set your c1,c2 vars to = and change c1=c1+1 to c1=c1-1 and c2=c2+1 to c2=c2-1.