Wie erstellen Sie mehrere Timer auf einer Seite, die unabhängig voneinander funktionieren - Javascript?

Question

Ich schrieb ein Timer-Objekt, das wie eine Stoppuhr funktioniert (klicken Sie einmal und der Timer startet, klicken Sie erneut und es stoppt, doppelklicken und es wird zurückgesetzt). Alles funktioniert gut, wenn ich nur einen Timer aktiviere. Wenn ich einen zweiten Timer aktiviere, hört der erste auf zu arbeiten. Wenn ich einen dritten Timer aktiviere, hört der zweite auf zu arbeiten.

Ich habe jedes Timer-Objekt dynamisch erstellt, um jedem Timer seinen eigenen Namen zu geben (Fenster [timer1]). Aber sie handeln nicht unabhängig. Was fehlt mir, um die Timer-Objekte unabhängig voneinander arbeiten zu lassen?

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; 
    } 
    window[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; 
} 

Answer 1

Sie haben einige Problembereiche. Z.B.

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; 
} 

wird diese minute, element und t in globalem Gültigkeitsbereich deklarieren, damit diese Werte jeder Anruf zu startClock überschreiben. Hier

ist eine Überarbeitete 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(); 
    } 

} 

Lesen Sie mehr über Objects in JavaScript.

Answer 2

Dies wird zwei getrennte Instanzen von Sekunden-Timer von 0 - für immer laufen. Ändern Sie es einfach zu dem, was Sie brauchen.

---

<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 ...

---

es in umgekehrter Doing zählen absetzte nur Ihre c1, c2 vars = und c1=c1+1-c1=c1-1 und c2=c2+1-c2=c2-1 ändern.

Answer 3

einem alten Post Neubelebung (keine Flamme mich nicht bitte) ...

ich überarbeitet und eine komplette Lösung anbieten, mit der Formatierung & Millisekunden.

Kudos geht an:

• Felix Kling und OP für Urcode & Gewinde
• Ildar Shaimordanov für "[document.insertAfter]" (für DOM 'Runden' verwendet) code.google.com/ p/jsxt/source/browse/trunk/js/web/document.insertAfter.js? r = 220
• Team, das phpjs.org/functions/sprintf:522 erstellt
• Me

Ich ging generic mit window.onload - JQuery Benutzer sicher sein, .ready() API-Handler zu verwenden.

<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) den Code der Einfachheit halber - verwenden jsbeautifier.org zu 'unminify'.

Großes Werkzeug für AJAX Zeitstudien/AJAX Stoppuhr

Achtung! Wenn das Timeout auf "1" gebracht wird, erhöht sich die CPU erheblich. Ich fand einen glücklichen Median um 35-80 ms.

Try it now! - Dies funktioniert mit Browsern modernen ECMAScript unterstützt 5

Try it now! - Dies funktioniert mit älteren Browsern mit JQuery-Proxy anstelle von bind