WindowTimers.setTimeout()

Die Funktion setTimeout() der WindowOrWorkerGlobalScope-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.

Syntax

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

 

Parameter

 

funktion
Die Funktion, die nach zeitspanne Millisekunden ausgefĂŒhrt werden soll.
code
code in der alternativen Syntax ist eine Zeichenkette, die Code enthĂ€lt, der nach zeitspanne Millisekunden ausgefĂŒhrt werden soll.  code sollte aus den gleichen GrĂŒnden, die auch eval() zum Sicherheitsrisiko machen, nicht verwendet werden.
zeitspanne Optional
zeitspanne ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der funktion bzw. code ausgefĂŒhrt werden soll. Dieser Wert ist ein Mindestwert, die tatsĂ€chlich abgelaufene Zeit kann lĂ€nger sein, siehe GrĂŒnde fĂŒr lĂ€ngere als gegebene Wartezeiten weiter unten.
parameter1, ..., parameterN Optional
Diese Parameter werden an die funktion oder den code ĂŒbergeben.
Anmerkung: Der Internet Explorer unterstĂŒtzt bis einschließlich Version 9 die Übergabe von zusĂ€tzlichen Parametern nicht.

RĂŒckgabewert

setTimeout() gibt eine ID zurĂŒck, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an clearTimeout() (en-US)  ĂŒbergeben werden.

Jede ID wird von setTimeout() und setInterval() nur einmalig je Objekt (window oder Worker) verwendet.

Beispiel

HTML

<p>Beispiel</p>
<button onclick="delayedAlert();">Zeige nach zwei Sekunden einen Alarm.</button>
<p></p>
<button onclick="clearAlert();">Alarm vorzeitig abbrechen.</button>

JavaScript

var timeoutID;

function delayedAlert() {
  timeoutID = window.setTimeout(slowAlert, 2000);
}

function slowAlert() {
  alert('Das hat gedauert!');
}

function clearAlert() {
  window.clearTimeout(timeoutID);
}

Ergebnis

Siehe auch clearTimeout()

Polyfill

Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu ĂŒbergeben:

/*\
|*|
|*|  Polyfill which enables the passage of arbitrary arguments to the
|*|  callback functions of JavaScript timers (HTML5 standard syntax).
|*|
|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
|*|
|*|  Syntax:
|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
|*|  var timeoutID = window.setTimeout(code, delay);
|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
|*|  var intervalID = window.setInterval(code, delay);
|*|
\*/

(function() {
  setTimeout(function(arg1) {
    if (arg1 === 'test') {
      // feature test is passed, no need for polyfill
      return;
    }
    var __nativeST__ = window.setTimeout;
    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
      var aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeST__(vCallback instanceof Function ? function() {
        vCallback.apply(null, aArgs);
      } : vCallback, nDelay);
    };
  }, 0, 'test');

  var interval = setInterval(function(arg1) {
    clearInterval(interval);
    if (arg1 === 'test') {
      // feature test is passed, no need for polyfill
      return;
    }
    var __nativeSI__ = window.setInterval;
    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
      var aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeSI__(vCallback instanceof Function ? function() {
        vCallback.apply(null, aArgs);
      } : vCallback, nDelay);
    };
  }, 0, 'test');
}())

Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:

setTimeout(function() {
    funktion("eins", "zwei", "drei");
}, 1000);

Ebenfalls kann die Funktion bind() genutzt werden:

 

setTimeout(function(arg1, arg2, arg3){}.bind(undefined, "eins", "zwei", "drei"), 1000);

 

Das "this"-Problem

In der an setTimeout() ĂŒbergebenen Funktion wird this bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der JavaScript-Referenz beschrieben.

ErklÀrung

Von setTimeout() ausgefĂŒhrter Code wird in einem anderen Kontext ausgefĂŒhrt, als in dem setTimeout() aufgerufen wurde. this wird deshalb in der aufgerufenen Funktion window oder global entsprechen, nicht dem this des Bereichs, in dem  setTimeout() aufgerufen wurde. Beispiel:

myArray = ["null", "eins", "drei"];
myArray.myMethod = function (sProperty) {
    alert(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // Ausgabe: "null,eins,zwei"
myArray.myMethod(1); // Ausgabe: "eins"
setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
// Versuchen wir, 'this' zu ĂŒbergeben
setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler

Es gibt hier keine Möglichkeit, this an die aufzurufende Funktion durchzureichen.

Eine Lösungsmöglichkeit

Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen setTimeout() und setInterval() durch zwei eigene zu ersetzen, die sich Function.prototype.call bedienen:

// Enable the passage of the 'this' object through the JavaScript timers

var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;

window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeST__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};

window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeSI__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};
Hinweis: Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu ĂŒbergeben, wie es HTML5 vorsieht. Sie können daher auch als Polyfill benutzt werden.

Anmerkungen

Eine Wartezeit kann mit window.clearTimeout() abgebrochen werden.

Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist window.setInterval() die bessere Wahl.

Passing string literals

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

// Correct
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// Incorrect
window.setTimeout("alert(\"Hello World!\");", 500);

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

GrĂŒnde fĂŒr lĂ€ngere als gegebene Wartezeiten

Aus verschiedenen GrĂŒnden kann die tatsĂ€chliche Zeit bis zum Aufruf der Funktion lĂ€nger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden hĂ€ufigsten.

Wartezeiten betragen 4ms oder mehr

Um das System nicht zu ĂŒberlasten, begrenzen moderne Browser die HĂ€ufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -hĂ€ufigkeit. Beispiel:

function cb() { f(); setTimeout(cb, 0); }
setTimeout(cb, 0);
setInterval(f, 0);

Chrome und Firefox drosseln nach dem fĂŒnften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.

Eine Wartezeit von 0 ms kann mit window.postMessage() (en-US) erreicht werden, wie hier beschrieben.

 

Hinweis: Die Mindestwartezeit, DOM_MIN_TIMEOUT_VALUE, betrÀgt 4 ms (Firefox-Einstellung dom.min_timeout_value), die Verschachtelungstiefe DOM_CLAMP_TIMEOUT_NESTING_LEVEL betrÀgt 5.

Hinweis: Der Wert 4 ms wurde mit HTML5 festgelegt und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) war der Mindestwert 10 ms.

 

 

Wartezeiten in inaktiven Tabs  grĂ¶ĂŸer als 1s

Um die Last noch weiter zu verringern, betrÀgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsÀtzlich mindestens 1 s.

Firefox setzt diese BeschrĂ€nkung seit Version 5 um (siehe Bug 633421). Der Wert von 1000 ms kann in der Einstellungen dom.min_background_timeout_value geĂ€ndert werden.
Chrome setzt diese BeschrÀnkung seit Version 11 um (crbug.com/66078).

Bei Firefox fĂŒr Android betrĂ€gt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe Bug 736602). Jegliche AktivitĂ€t in diesen Tabs kann auch vollstĂ€ndig angehalten werden.

Seit Version 50 gelten in Firefox keine BeschrĂ€nkungen mehr, falls sich die Web Audio API AudioContext (en-US) im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits fĂŒr jegliche Dokumente mit einem AudioContext (en-US), unabhĂ€ngig von dessen Status.
Apps, die Musik Note fĂŒr Note abspielen, konnten wegen der BeschrĂ€nkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.

Lastbedingte Verzögerungen

ZusĂ€tzlich zum aktiven Drosseln kann es zu verlĂ€ngerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschĂ€ftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgefĂŒhrt werden kann, solange der Thread, der setTimeout() aufgerufen hat, noch aktiv ist:

function bla() {
  console.log('bla wurde aufgerufen');
}
setTimeout(bla, 0);
console.log('hinter setTimeout');

Ergebnis:

hinter setTimeout
bla wurde aufgerufen

Obwohl setTimeout die sofortige AusfĂŒhrung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nĂ€chsten Gelegenheit zurĂŒckgestellt. Erst wenn der aktuell laufende Code ausgefĂŒhrt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.

BrowserkompatibilitÀt

Wir konvertieren die KompatibilitÀtsdaten in ein maschinenlesbares JSON Format. Diese KompatibilitÀtstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Eigenschaft Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basis 1.0 1.0 (1.7 oder frĂŒher) 4.0 4.0 1.0
Eigenschaft Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic 1.0 1.0 1.0 (1) 6.0 6.0 1.0

Spezifikation

Gehört zu DOM-Level 0, wie spezifiziert in HTML5.

Siehe auch