JavaScript Stoppuhr?

Das ist mein JavaScript-Code:

let startTime = new Date();
let timerHandle;

function Start() {
  if (startTime == null) {
    startTime = new Date();
    timerHandle = window.setInterval(updateTime, 10);
  }
  else {
    startTime = time;
    timerHandle = window.setInterval(updateTime, 10);
  }
}

function Stop() {
  window.clearInterval(timerHandle);
}

function Reset() {
  stop();
  startTime = new Date();
  updateTime();
  startTime = null;
}

function updateTime() {
  if (startTime == null) {
    let time = 0.0;
  }

  time = (new Date() - startTime) / 1000;
  let item = document.getElementsByTagName("h1")[0];
  item.innerHTML = time.toFixed(2) + " Sek.";
}

Der Fehler ist, wenn ich Start drücke und dann Stop und dann Start, dass bei irgendeiner großen Zahl weitergezählt wird.

Ich freue mich über Antworten.

Danke im Voraus.

Answer 1

[regex9]

Zuerst einmal denke ich, dass du das Keyword let noch nicht wirklich verstanden hast.

if (startTime == null) {
  let time = 0.0;
}

time = (new Date() - startTime) / 1000;

In diesem Code-Abschnitt legst du maximal zwei unterschiedliche Variablen namens time an. Die im if-Körper existiert nur innerhalb dieses Blocks, danach verfällt ihre Lebenszeit gleich wieder. Die zweite Variable mit selben Namen hingegen wirkt als globale Variable. Sie ist also auch außerhalb der Funktion bekannt.

Mit let gibst du explizit an, dass eine Variable nur in ihrem deklarierten Kontext existieren soll. Lies für Weiteres hier.

Des Weiteren ...

• beginnen Funktionsnamen nach Konvention mit einem Kleinbuchstaben. Sie beschreiben mit einem Verb ihre Tätigkeit. Ein Verb wird ebenfalls kleingeschrieben.
• setzt du einen Text mit innerHTML, obwohl dein Text kein Markup enthält. Dies ist eigentlich nicht notwendig, innerText reicht völlig aus.
• solltest du ein HTML-Element nach Möglichkeit nur einmal suchen und nicht alle 10 Millisekunden. Genau genommen lässt du sogar in jedem Fall die komplette Seite absuchen, denn es geht ja erst einmal darum, alle h1-Tags zu finden. Ich würde die empfehlen, stattdessen getElementById zu verwenden, zumal es ja eh nur ein h1-Element auf einer Seite geben sollte.

Zu deinem Konzept:

Wenn du die Zeit zählen möchtest, ist es nicht notwendig, zuvor ein Datum zu erfragen, zumal du dabei erst den Fehler erzeugst:

time = (new Date() - startTime) / 1000;

Da du die Variable startTime auf jeden Fall mit einem Wert belegst, ist sie nicht null. Die Variable time wird daraufhin für eine Definition benutzt. Genau genommen wird hier schon der erste Fehler geworfen, der dein Skript auch nicht ausführbar macht, denn time ist bis dahin nicht definiert. Angenommen, sie ist anfangs auf 0.0, wird deine Differenz zwischen dem aktuellen Datum und 0 gebildet. Dies ergibt bei mir derzeit die Zahl 1526774396683. Mit dieser wird folgend auch konsequent weitergerechnet.

Es würde aber vollkommen ausreichen, die Variable time um 1 zu erhöhen und dann nach Millisekunden umzurechnen. Da du ein Intervall von 10 hast, und 1000 Millisekunden eine Sekunde darstellen, sollte die Berechnung so aussehen:

time = ++counter / 100

Endresultat:

var time = 0;
var timer;
var output = document.getElementById("output");

function start() {
  timer = setInterval(updateTime, 10);
}

function stop() {
  clearInterval(timer);
}

function reset() {
  stop();
  time = -1;
  updateTime();
}

function updateTime() {
  output.innerText = (++time / 100).toFixed(2) + " Sek.";
}            

Answer 2

[Kieselsaeure]

Wtf, warum so kompliziert?

Habs jetzt nicht getestet (bin am Handy) aber so in der Art dürfte es auch gehen.

var time;
var intervalHandler;
var item = document.getElementsByTagName("h1")[0];

function start()
{
 time = 0;
 intervalHandler = window.setInterval(update,1000);
}

function stop()
{
 window.clearInterval(intervalHandler);
}

function update()
{
 time += 1;
 item.innerHTML = time + " Sek.";
}