Dies ist nur eine Spielwiese.
Das echte SELFHTML-Wiki gibt es unter https://wiki.selfhtml.org.
Das echte SELFHTML-Wiki gibt es unter https://wiki.selfhtml.org.
JavaScript/Window/setTimeout
SELFHTML e.V.
< JavaScript | Window(Weitergeleitet von JavaScript/Objekte/window/setTimeout)
Die Methode setTimeout setzt ein Timeout, ähnlich einem Intervall, nur dass es nur einmal ausgeführt wird.
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())
Inhaltsverzeichnis
Funktionsweise
var to;
function timeOut() {
history.back();
}
to = setTimeout("timeOut()", 2000);
Übergabe von optionalen Parametern
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
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
Countdown
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
Weblinks
- WHATWG: Timers
- MDN: Window.setTimeout
