Bitte warten...

JavaScript: Timeout und Interval

► JavaScript-Referenz: setTimeout() clearTimeout() setInterval() clearInterval()

Mit den Methoden setTimeout() und setInterval() kann die als Argument übergebene Funktion mit der ebenfalls als Argument übergebenen Zeitverzögerung in Millisekunden gestartet werden. Während setTimeout() die Funktion nur ein Mal startet, startet setInterval() die Funktion immer wieder nach der angegebenen Zeit neu.

Mit clearTimeout() bzw. clearInterval() kann der anvisierte Funktionsaufruf vor der angegebenen Zeit abgebrochen und das Skript damit ohne weitere Unterbrechung fortgesetzt werden. Dazu muss die ID des entsprechenden Prozesses als Argument übergeben werden.

Code kopieren
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Timeout und Interval</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <span id="time" style="font-size:30px;font-weight:bold;font-family:monospace;"></span>
    <button id="button" type="button" onclick="initStart();">Animation in 5 Sekunden starten</button>
    <script>
      function initStart() {
        id1 = setTimeout(startAnimation, 5000);
        document.getElementById("button").innerHTML = "Start abbrechen";
        document.getElementById("button").setAttribute("onclick", "cancelStart();");
      }
      function cancelStart() {
        clearTimeout(id1);
        document.getElementById("button").innerHTML = "Animation in 5 Sekunden starten";
        document.getElementById("button").setAttribute("onclick", "initStart();");
      }
      function startAnimation() {
        c = 0;
        id2 = setInterval(doAnimation, 10);
        document.getElementById("button").innerHTML = "Animation abbrechen";
        document.getElementById("button").setAttribute("onclick", "quitAnimation();");
      }
      function doAnimation() {
        document.getElementById("time").style.color = "hsl(" + c + ",85%,50%)";
        c++;
      }
      function quitAnimation() {
        clearInterval(id2);
        document.getElementById("time").style.color = "initial";
        document.getElementById("button").innerHTML = "Animation in 5 Sekunden starten";
        document.getElementById("button").setAttribute("onclick", "initStart();");
      }
      function setTime() {
        d = new Date();
        document.getElementById("time").innerHTML =
          d.getHours().toString().padStart(2, "0") + ":" +
          d.getMinutes().toString().padStart(2, "0") + ":" +
          d.getSeconds().toString().padStart(2, "0") + ":" +
          d.getMilliseconds().toString().padStart(3, "0");
      }
      setInterval(setTime, 100);
    </script>
  </body>
</html>