SetTimeout JavaScript -Funktion: Handbuch mit Beispielen

JavaScripts setTimeout Funktion Erläuterung: Implementieren Sie die verzögerte Ausführung

setTimeout ist eine native Funktion in JavaScript, mit der nach einer angegebenen Verzögerung (Millisekunden) Funktionen aufgerufen oder Code -Snippets ausgeführt werden. Dies ist in vielen Szenarien nützlich, z. B. das Anzeigen eines Popup-Fensters, nachdem der Benutzer eine Weile auf der Seite durchsucht oder eine kurze Verzögerung hinzugefügt hat, bevor der Element-Schweber-Effekt entfernt wird (Verhinderung von Fehloperationen).

Schlüsselpunkte:

• JavaScripts setTimeout -Funktion ermöglicht die Ausführung von Funktionen oder Codeausschnitten nach einer bestimmten Anzahl von Millisekunden, die für Aufgaben wie das Anzeigen von Popups nach einer bestimmten Browserzeit sehr nützlich sind.
• setTimeout akzeptiert eine Funktionsreferenz als erster Parameter, der ein Funktionsname, eine Variable sein kann, die die Funktion oder die anonyme Funktion verweist. Es kann auch Code -Zeichenfolgen ausführen, wird jedoch nicht empfohlen, da dies die Lesbarkeit, Sicherheit und Geschwindigkeit verringert.
• Sie können eine anonyme Funktion als erster Parameter verwenden, um den Parameter an die von setTimeout ausgeführte Rückruffunktion zu übergeben. Eine Alternative zur Auflistungsparameter nach der Verzögerung ist jedoch mit IE9 und unten unvereinbar.
• In dem von setTimeout ausgeführten Code wird der Wert von this in einem anderen Ausführungskontext ausgeführt als die Funktion, die es nennt, was zu Problemen führen kann, wenn der Kontext des Schlüsselworts this wichtig ist. Dies kann mit bind, Bibliotheksfunktionen oder Pfeilfunktionen gelöst werden.
Der Rückgabewert von
• setTimeout ist eine numerische ID, mit der der Timer in Verbindung mit der Funktion clearTimeout abgesagt werden kann.

setTimeout Beispiel für die Verwendung

Der folgende Codeblock zeigt ein einfaches Beispiel, das die Nachricht nach einer Auszeit von 2 Sekunden (2000 Millisekunden) an die Konsole druckt:

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

Um dieses Konzept ausführlicher zu demonstrieren, zeigt die folgende Demonstration ein Popup-Fenster an, nachdem Sie zwei Sekunden lang auf die Schaltfläche geklickt haben: (Bitte besuchen Sie CodePen, um die Demo anzuzeigen)

Grammatik

gemäß der MDN -Dokumentation lautet die Syntax von setTimeout wie folgt:

const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])

von:

• timeoutID ist eine digitale ID, die in Verbindung mit clearTimeout verwendet werden kann, um den Timer abzubrechen.
• scope bezieht sich auf die Schnittstelle Window oder die WorkerGlobalScope -Schinschnittstelle.
• functionRef ist die Funktion, die nach Ablauf des Timers ausgeführt wird.
• code ist eine alternative Syntax, mit der Sie Zeichenfolgen anstelle von Funktionen einbeziehen können, die nach Ablauf des Timers zusammengestellt und ausgeführt werden.
• delay ist die Anzahl der Millisekunden, in denen ein Funktionsaufruf verzögert werden sollte. Wenn es weggelassen wird, beträgt der Standard 0.
• arg1, ..., argN sind andere Parameter, die an die von functionRef angegebene Funktion übergeben wurden.

Hinweis: Quadratklammern [] Geben Sie optionale Parameter an.

setTimeout und window.setTimeout

Sie werden feststellen, dass die Syntax manchmal window.setTimeout enthält. Warum ist das?

Wenn der Code in einem Browser ausgeführt wird, bezieht sich scope auf das globale window Objekt. setTimeout und window.setTimeout beziehen sich auf dieselbe Funktion. Der einzige Unterschied besteht darin, dass wir in der zweiten Anweisung die setTimeout -Methode als Eigenschaft des window -Objekts bezeichnen.

Meiner Meinung nach fügt dies Komplexität hinzu, während die Vorteile minimal sind. Wenn Sie eine andere setTimeout -Methode definieren, die zuerst gefunden und in der SCOPE -Kette zurückgegeben wird, haben Sie möglicherweise größere Probleme, über die Sie sich Sorgen machen müssen.

In diesem Tutorial werde ich window weglassen, aber am Ende liegt es an Ihnen, welche Syntax Sie auswählen.

setTimeout Beispiel für die Verwendung der Methode

setTimeout Die Methode akzeptiert eine Funktionsreferenz als erster Parameter.

Dies kann der Name der Funktion sein:

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

Variablen, die Referenzfunktionen (Funktionsausdruck):

const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])

oder anonyme Funktion:

function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);

Wie oben erwähnt, können Sie die Codezeichenfolge auch für seine Ausführung an setTimeout übergeben:

const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);

Dies wird jedoch aus den folgenden Gründen nicht empfohlen:

• schwer zu lesen (und daher schwer zu pflegen und/oder zu debuggen).
• Es verwendet implizite eval, was ein potenzielles Sicherheitsrisiko darstellt.
• Es ist langsamer als die Alternative, weil es den JS -Dolmetscher anrufen muss.

Parameter an setTimeout

übergeben

Im Grund-Szenario besteht die bevorzugte Kreuzbrowser-Methode darin, das Argument an die von setTimeout ausgeführte Rückruffunktion zu übergeben, indem eine anonyme Funktion als erster Parameter verwendet wird.

Im folgenden Beispiel wählen wir ein zufälliges Tier aus dem animals -Array aus und übergeben dieses zufällige Tier als Parameter an die makeTalk -Funktion. Dann führt setTimeout die makeTalk -Funktion mit einer Verzögerung von einer Sekunde aus:

setTimeout(() => { alert('Howdy!'); }, 2000);

Hinweis: Ich habe eine reguläre Funktion (getRandom) verwendet, um ein zufälliges Element aus dem Array zurückzugeben. Sie können es auch als Funktionsausdruck mit Pfeilfunktionen schreiben:

setTimeout('alert("Howdy!");', 2000);

Wir werden die Pfeilfunktion im nächsten Abschnitt vorstellen. Hier ist ein CodePen, der den obigen Code enthält (Sie müssen die Konsole öffnen, um die Ausgabe anzuzeigen).

Alternative Methode

Aus der Syntax oben im Artikel ist ersichtlich, dass es eine zweite Methode gibt, um Parameter an die von setTimeout ausgeführte Rückruffunktion zu übergeben. Dies beinhaltet die Auflistung von Parametern nach der Verzögerung.

Beziehen Sie sich auf unser vorheriges Beispiel: Dies gibt uns:

function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);

Leider funktioniert dies nicht in IE9 oder unten, wobei die Parameter als undefined übergeben werden. Wenn Sie leider Unterstützung für IE9 benötigen, wird auf MDN eine Polyfonie bereitgestellt.

this Schlüsselwort Fragen

setTimeout Der ausgeführte Code wird in einem anderen Ausführungskontext ausgeführt als die Funktion, die ihn nennt. Dies wird zu einem Problem, wenn der Kontext des Schlüsselworts this wichtig ist:

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

Der Grund für diese Ausgabe ist, dass

im ersten Beispiel auf das this -Objekt und im zweiten Beispiel auf das globale dog -Objekt verweist (es hat nicht das Attribut this ). window sound Um dieses Problem zu lösen, gibt es verschiedene Möglichkeiten ...

Erklärende Einstellung des Wertes von

this Mit der Methode

können Sie eine neue Funktion erstellen. Wenn Sie aufgerufen werden, wird das Schlüsselwort

auf den bereitgestellten Wert festgelegt (in diesem Fall das bind -Objekt). Dies gibt uns: bind this dog Benutzerbibliothek

const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])

Viele Bibliotheken haben integrierte Funktionen, um dieses Problem zu lösen. Zum Beispiel die

-Methode von JQuery. Es akzeptiert eine Funktion und gibt eine neue Funktion zurück, die immer einen bestimmten Kontext hat. In diesem Fall wäre das:

jQuery.proxy() Verwenden Sie die Pfeilfunktion in

function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);

Die Pfeilfunktion wurde in ES6 eingeführt. Sie sind viel kürzer als die Syntax der regulären Funktionen:

setTimeout

Natürlich können Sie sie mit

verwenden, aber eine zu beachten - die Pfeilfunktion hat keinen eigenen Wert

. Stattdessen verwenden sie den Wert

const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);

des geschlossenen lexikalischen Kontextes.

setTimeout Verwenden Sie die reguläre Funktion: this this

Verwenden Sie die Pfeilfunktion:

setTimeout(() => { alert('Howdy!'); }, 2000);

im zweiten Beispiel verweist

auf das globale

Objekt (wieder hat es keine

setTimeout('alert("Howdy!");', 2000);

Eigenschaft).

this Dies kann uns in Schwierigkeiten bringen, wenn wir die Pfeilfunktion mit window verwenden. Wir haben schon einmal gesehen sound

Dies funktioniert nicht, wenn die Pfeilfunktion in der eingeführten Methode verwendet wird, da die Pfeilfunktion keinen eigenen Wert hat. Diese Methode erfasst weiterhin

. setTimeout setTimeout saubereres Code mit Arrow -Funktionen und this schreiben

Da die Pfeilfunktion jedoch keinen eigenen

function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);

-Werte hat, kann sie uns auch einen Vorteil verschaffen.

this Betrachten Sie den Code wie diesen: undefined

Es kann mit der Pfeilfunktion besser neu geschrieben werden: setTimeout

Wenn Sie den Beginn der Pfeilfunktionen kennenlernen möchten, lesen Sie "ES6 -Pfeilfunktionen: Concise Syntax in JavaScript". this

Timer abbrechen

Wie wir zu Beginn des Artikels gelernt haben, ist der Rückgabewert von

const getRandom = arr => arr[Math.floor(Math.random() * arr.length)];

eine numerische ID, die in Verbindung mit der Funktion

verwendet werden kann, um den Timer abzubrechen:

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

Lassen Sie uns sehen, wie es tatsächlich funktioniert. Wenn Sie im folgenden Stift auf die Schaltfläche Countdown starten, beginnt der Countdown. Wenn der Countdown abgeschlossen ist, gewinnt der Kätzchen. Wenn Sie jedoch die Taste "Countdown stoppen" drücken, wird der Timer angehalten und zurückgesetzt. (Wenn Sie keinen coolen Effekt sehen, wenn der Countdown Null erreicht, können Sie den Stift mit der Taste auf der rechten Seite des Bodens erneut ausführen.)

Zusammenfassung

In diesem Artikel zeige ich, wie setTimeout die Ausführung einer Funktion verzögert. Ich habe auch gezeigt, wie man Parameter an setTimeout übergeben, wie man den Wert this in seiner Rückruffunktion beibehält und wie man den Timer absagt.

setTimeout FAQs für JavaScript -Funktionen

• setTimeout Was ist in JavaScript?

  setTimeout ist eine integrierte Funktion in JavaScript, mit der Sie die Ausführung eines Funktions- oder Codesegments nach einer bestimmten Verzögerung (in Millisekunden) planen können.

• setTimeout Wie funktioniert es?

  Wenn Sie die Funktion setTimeout aufrufen, müssen Sie zwei Parameter angeben: die Funktion oder den Code zur Ausführung und die Verzögerung in Millisekunden. Die bereitgestellten Funktionen/Code wird der Warteschlange hinzugefügt und nach der angegebenen Verzögerung von der Warteschlange in den Anrufstack zur Ausführung verschoben.

• Was sind die Alternativen zur Verwendung von setTimeout?

  Ja, es gibt Alternativen wie setInterval, die die Funktion in bestimmten Intervallen und die neuere requestAnimationFrame wiederholen, die für glattere Animationen und bessere Browserleistung gilt.

• Wann sollte nicht verwendet werden setTimeout?

  setTimeout ist ein nützliches Instrument zur Planung der asynchronen Codeausführung in JavaScript, aber in einigen Fällen ist es möglicherweise nicht die beste Wahl. Für präzise Animationen oder Spiele sollten Sie requestAnimationFrame verwenden. Sie sollten nicht mehrere setTimeout Anrufe nisten. setTimeout ungenau für Verzögerungen von weniger als 10 Millisekunden; Wenn Sie eine Echtzeitanwendung erstellen (z. B. Online-Multiplayer-Spiele oder Finanzhandelsplattformen), wählen Sie Echtzeit-Technologien wie WebSockets. Große CPU-intensive Aufgaben können bei Bedarf Ereignisschleifen blockieren.

• Kann ich die setTimeout -Operation stornieren?

  Ja, Sie können die Funktion clearTimeout verwenden, um das geplante Zeitübergang abzubrechen. Die von setTimeout als Parameter zurückgegebene Zeitüberschreitungs -ID. Zum Beispiel: const timeoutId = setTimeout(myFunction, 1000); clearTimeout(timeoutId);

• Was ist der Unterschied zwischen

  setTimeout und setInterval?

  setTimeout Planen Sie die Funktion, die nach der angegebenen Verzögerung einmal ausgeführt werden soll, während setInterval die Funktion planen, die wiederholt im angegebenen Intervall ausgeführt wird, bis sie storniert wird oder das Programm stoppt.

• Was ist der Mindestverzögerungswert, den ich setTimeout verwenden kann?

  Der Mindestverzögerungswert beträgt 0, was bedeutet, dass die Funktion geplant ist, die vor Abschluss des aktuellen Threads ausgeführt werden soll, jedoch alle ausstehenden Ereignisse behandelt. Die tatsächliche Granularität des Timers variiert jedoch vom Browser über Browser und Umgebung bis hin zu verschiedenen Browsern. Einige Umgebungen unterstützen möglicherweise keine Verzögerungen von weniger als 10 Millisekunden.

• setTimeout Was ist in Node.js?

  setTimeout ist eine integrierte Funktion für node.js, die die Ausführung einer bestimmten Funktion oder einen bestimmten Codeblock nach angegebener Anzahl von Millisekunden verzögert.

• Wie verwendet ich setTimeout in node.js?

  Sie können die Funktion setTimeout wie folgt verwenden: setTimeout(callback, delay); wobei callback die Funktion ist, die Sie nach der angegebenen Millisekundenverzögerung ausführen möchten.

• Was sind die Best Practices für die Verwendung setTimeout in node.js?

  Einige Best Practices umfassen die Verwendung benannter Funktionen als Rückrufe, die anmutiger Handhabung und das Verständnis des Verhaltens von Ereignisschleifen, um unerwartete Verzögerungen oder Blockaden zu vermeiden. Erwägen Sie auch, setImmediate während des nächsten Ereignisschleifungszyklus sofort auszuführen.

(Beachten Sie, dass ich den Inhalt von CodePen in der Ausgabe nicht direkt in den Inhalt von CodePen enthält.

Das obige ist der detaillierte Inhalt vonSetTimeout JavaScript -Funktion: Handbuch mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!