Mehrere countdown-Timer auf einer Seite

Arbeitet derzeit an einem Projekt, das erfordert, dass zwei Timer auf einer Seite. Die Timer müssen eine start-Taste und beide haben unterschiedliche timings (d.h. timer1 dauert 10 Sekunden und timer2 dauert 20). Hier ist das Skript, das ich verwende, aber ich weiß nicht so duplizieren Sie den timer und lassen Sie alle timer unabhängig voneinander arbeiten.

Gibt es Menschen, die können ganz einfach ändern Sie dieses Skript, um eine funktionierende, eine für zwei Timer?

<html>
<head>
<script language="JavaScript" type="text/javascript">
    var interval;
    var minutes = 0;
    var seconds = 10;

    function countdown(element) {
        interval = setInterval(function(timer) {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    (el.innerHTML = "STOP!");     

                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? '' : '';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
            seconds--;
        }, 1000);
    }
var start = document.getElementById('start');

start.onclick = function(timer) {
    if (!interval) {
        countdown('countdown');
    }
}

</script>
</head>

<body>
<div id='countdown'></div>
<input type="button" onclick="countdown('countdown');this.disabled = true;" value="Start" />
</body>
</html>

InformationsquelleAutor user3486844 | 2014-04-01

6

Gibt es einige Dinge, die Sie tun, die verhindern, dass Sie von der Erweiterung des Codes. Wenn Sie möchten, eine wiederverwendbare timer, können Sie nicht schwer setzen der Variablen benutzt wird. So erste Sache ist, um loszuwerden, von den drei Variablen an der Spitze, und erstellen Sie Sie im Rahmen der Funktion.

So, jedes mal wenn die Funktion aufgerufen wird, einen neuen Satz von Variablen, die erstellt wird, für deren Ausführung.

Die Minuten und Sekunden sind wohl am besten als Parameter übergeben und Intervall definiert werden sollte, die im Rahmen der Funktion.

Zweitens, werden Sie durch den click-handler inline-und innerhalb des Skripts. Loswerden einer von Ihnen (vorzugsweise loszuwerden, die inline-version).

Dann, Sie haben eine timer-variable als parameter für den click-handler und setInterval aber nie benutzt. Diese variable wird gesetzt, um das click-event auf dem event-handler (und wieder, wird nicht verwendet) und undefiniert auf die setInterval-Funktion. So dass Sie wirklich nicht da sein sollte.

Ein performance-Problem, möchten Sie vielleicht wissen, ist, dass Sie tun, eine DOM-lookup für den Zähler JEDE Sekunde. Man sollte es einmal pro Funktionsaufruf zu Beginn und cache es.

Zu diesem Punkt Funktion sieht mehr oder weniger so
```
function countdown(element, minutes, seconds) {
    //Fetch the display element
    var el = document.getElementById(element);

    //Set the timer
    var interval = setInterval(function() {
        if(seconds == 0) {
            if(minutes == 0) {
                (el.innerHTML = "STOP!");     

                clearInterval(interval);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }

        if(minutes > 0) {
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }

        var second_text = seconds > 1 ? '' : '';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        seconds--;
    }, 1000);
}
```
Und das setup mehr oder weniger so
```
//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
    countdown('countdown1', 0, 15);
}

start2.onclick = function() {
    countdown('countdown2', 0, 10);
}
```
Natürlich, müssen Sie die extra-Taste und Zähler
```
<div id='countdown1'></div>
<div id='countdown2'></div>
<input id="timer1" type="button" value="Start timer 1" />
<input id="timer2" type="button" value="Start timer 2" />
```
Beispiel: http://codepen.io/anon/pen/Jmpcq/?editors=101

--
Hinweis: für genaue Timer, setInterval() kann nicht eine gute option, da das genaue Intervall ist nicht garantiert und Zeit verfolgt, kann verzögert werden, nach einer Weile. Für Anwendungen, wo eine genaue Zeit wichtig, es gibt andere Methoden (z.B. https://sitepoint.com/creating-accurate-timers-in-javascript & https://html5rocks.com/en/tutorials/webperformance/usertimin), danke @KaiKarver für den Hinweis in den Kommentaren.

schön zu geben, ein funktionierendes Beispiel. Aber je nach setInterval() für das timing ist nicht sehr präzise. Besser zu nutzen, z.B. Date.now() für die Zeit Angaben, siehe z.B. sitepoint.com/creating-accurate-timers-in-javascript Und wenn Sie wollen sogar höhere Genauigkeit, versuchen Sie performance.now() html5rocks.com/en/tutorials/webperformance/usertiming
Cheers @KaiCarver, du hast Recht in Bezug auf Genauigkeit und danke für die links, aber die Frage war etwa, wie man mehrere Timer und nicht, wie man Sie genauer, so denke ich, keinen Sinn, eine Antwort komplexer als es sein muss.
gut du hast vergessen eine (ziemlich belanglos) performance-Problem, obwohl die Frage war nicht zum verbessern der Leistung... Mein Punkt war, dass Leute (wie mich!) laufen konnte Sie in diesem Beitrag auf der Suche nach einer einfachen Möglichkeit zum implementieren mehrerer Timer auf eine Seite und vielleicht nicht bewusst sein, dass die Timer implementiert werden können, die Wild ungenau. Und so eine kleine Erwähnung dieser Tatsache in Ihrem sonst hilfreiche Antwort sein könnte, um eine öffentliche Dienstleistung.
Das ist ein fairer Punkt, den ich bearbeitet die Antwort auf die note hinzufügen.
danke @guioconnor! durch die Art und Weise, die ich eigentlich gespaltener Ihrem Beispiel pen vor ein paar Tagen für unbegrenzte mehrere Zähler zählen bis... und es hat immer noch die ungenaue Timer... da ich faul bin und es spielte keine Rolle, zu der Zeit, haha. Aber ich werde es vielleicht eines Tages codepen.io/kaicarver/pen/pyaKVR?Joe,Jack,Jill

InformationsquelleAutor guioconnor

var interval;

var countdown1 = {
    minutes:0,
    seconds: 10
};

var countdown2 = {
    minutes:0,
    seconds: 2
}

function countdown(element) {
    alert(element);
    var cd;
    element === 'countdown1' ? cd = countdown1 : cd = countdown2;
    interval = setInterval(function(timer) {
        var el = document.getElementById(element);
        if(cd.seconds == 0) {
            if(cd.minutes == 0) {
                (el.innerHTML = "STOP!");     

                clearInterval(interval);
                return;
            } else {
                cd.minutes--;
                cd.seconds = 60;
            }
        }
        if(cd.minutes > 0) {
            var minute_text = cd.minutes + (cd.minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? '' : '';
        el.innerHTML = minute_text + ' ' + cd.seconds + ' ' + second_text + '';
        cd.seconds--;
    }, 1000);
}
var start = document.getElementById('start');


 <div id='countdown'></div>
 <input type="button" onclick="countdown('countdown1');this.disabled = true;" value="Start" />
 <div id="countdown1"></div>

 <input type="button" onclick="countdown('countdown2');this.disabled = true;" value="Start" />
 <div id="countdown2"></div>