JavaScript/Window/setTimeout

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode setTimeout setzt ein Timeout, ähnlich einem Intervall, nur dass es nur einmal ausgeführt wird.

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

var timeoutID = window.setTimeout(funktion, zeitspanne, [parameter1, parameter2, ...]);

Diese Funktion erwartet zwei oder mehr Parameter:

  • funktion = Eine Zeichenkette mit einer JavaScript-Anweisung, die verzögert ausgeführt werden soll oder ein Funktionsobjekt.
  • zeitspanne = Wert in Millisekunden bis zum Ausführen der im 1. Parameter angegebenen Funktion.
  • weitere Parameter ... = optionale Argumente für das als Code übergebene Funktionsobjekt.
  • Rückgabewert: Die Timeout-Id (für clearTimeout())

Funktionsweise[Bearbeiten]

Beispiel ansehen …
    var to;
    function timeOut() {
      history.back();
    }
    to = setTimeout("timeOut()", 2000);

Übergabe von optionalen Parametern[Bearbeiten]

Wenn man für den 1. Parameter nur den Funktionsnamen ohne die Anführungszeichen und die Klammern übergibt, so kann man weitere Parameter übergeben, die in der Funktion verwendet werden können.


Beachten Sie: Dies funktioniert in älteren Versionen des Internet Explorer laut MSDN überhaupt nicht, ab Version 10 ist eine Funktionsfähigkeit im IE gegeben. Wenn das Programm auch mit älteren Browserfunktionen laufen soll, sollte man auf weitere Parameter verzichten und statt dessen die nachfolgend gezeigte Variante mit einer anonymen Funktion verwenden, die die benötigten Zusatzdaten als Closure einschließt.

in einer anonymen Funktion[Bearbeiten]

Beispiel ansehen …
    var to;
    function timeOut(val1, val2) {
      document.getElementById('id1').innerHTML = val1;
      document.getElementById('id2').innerHTML = val2;
    }
    to = setTimeout(timeOut, 2000, 'a', 'b');
    <p>Wert 1: <span id="id1"></span></p>
    <p>Wert 2: <span id="id2"></span></p>

Man kann auch eine anonyme Funktion als ersten Parameter übergeben, in der dann der auszuführende Code steht.

Beispiel
<html>
  <head>
    <title>Timeout-test</title>
    <script type="text/javascript">
    setTimeout(
      function(val1, val2) {
        document.getElementById('id1').innerHTML = val1;
        document.getElementById('id2').innerHTML = val2;
      },
      2000,
      'a', 'b');
    </script>
  </head>
  <body>
    <p>Wert 1: <span id="id1"></span></p>
    <p>Wert 2: <span id="id2"></span></p>
  </body>
</html>
Beachten Sie: In Google Chrome, Firefox und Opera wird auf inaktiven Tabs maximal ein Timeout pro Sekunde ausgelöst, um Rechenleistung zu sparen.[1] Timeouts mit geringen Verzögerungen werden also erst später als erwartet ausgelöst. Um Animationen trotzdem zeitlich korrekt ausführen zu können, wird empfohlen, requestAnimationFrame zu benutzen. Diese Funktion hat einige weitere Vorteile gegenüber setTimeout.
Empfehlung: Bei umfangreichen Funktion sollte setTimeout so früh wie möglich eingesetzt werden, damit die Berechnungszeit der weiteren Zuweisungen und Operationen nicht die Sekundenzählung (gerade am Anfang und am Schluss) springen lässt.

Anwendungsbeispiel[Bearbeiten]

Countdown[Bearbeiten]

Beispiel ansehen …
  var elem = document.getElementById('los');
  elem.addEventListener('click', startCountdown);	
  
  var elem = document.getElementById('stop');
  elem.addEventListener('click', stopCountdown);	

  function startCountdown () {
    countdown(10, 'counter');
    EnableCancelButton (true);
  }

  function stopCountdown() {
    var element = document.getElementById('counter');
    clearTimeout(element.timerId);
    EnableCancelButton(false);
  }

  function EnableCancelButton(enable) {
    var cancelButton = document.getElementById ("stop");
	cancelButton.disabled = !enable;
  }
        
  function leadingzero(number) {
    return (number < 10) ? '0' + number : number;
  }

  function countdown(seconds, target) {
    var element = document.getElementById(target);
    element.seconds = seconds;
    calculateAndShow(target);
  }

  function calculateAndShow(target) {
    var element = document.getElementById(target);
    if (element.seconds >= 0) {
        element.timerId = window.setTimeout(calculateAndShow,1000,target);
        var h = Math.floor(element.seconds / 3600);
        var m = Math.floor((element.seconds % 3600) / 60);
        var s = element.seconds % 60;
        element.innerHTML=
          leadingzero(h) + ':' +
          leadingzero(m) + ':' +
          leadingzero(s);
        element.seconds--;
    } else {
        completed(target);
        return false;
    }
  }

  function completed(target) {
    var element = document.getElementById(target);

    element.innerHTML = "<strong>Liftoff!<\/strong>";
  }

Es wird mit setTimeout() ein Countdown gestartet, der mit einem Klick auf den Stop-Button mittels clearTimeout() unterbrochen wird.


Quellen[Bearbeiten]

  1. MDN: setTimeout inactive tabs

Weblinks[Bearbeiten]