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!