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 vonthis
in einem anderen Ausführungskontext ausgeführt als die Funktion, die es nennt, was zu Problemen führen kann, wenn der Kontext des Schlüsselwortsthis
wichtig ist. Dies kann mitbind
, Bibliotheksfunktionen oder Pfeilfunktionen gel?st werden.
Der Rückgabewert von -
setTimeout
ist eine numerische ID, mit der der Timer in Verbindung mit der FunktionclearTimeout
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 mitclearTimeout
verwendet werden kann, um den Timer abzubrechen. -
scope
bezieht sich auf die SchnittstelleWindow
oder dieWorkerGlobalScope
-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 vonfunctionRef
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
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
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
verwenden, aber eine zu beachten - die Pfeilfunktion hat keinen eigenen Wert
. Stattdessen verwenden sie den Wertconst greet = function() { alert('Howdy!'); }; setTimeout(greet, 2000);des geschlossenen lexikalischen Kontextes.
setTimeout
Verwenden Sie die regul?re Funktion: this
this
setTimeout(() => { alert('Howdy!'); }, 2000);im zweiten Beispiel verweist
auf das globale
Objekt (wieder hat es keinesetTimeout('alert("Howdy!");', 2000);Eigenschaft).
this
Dies kann uns in Schwierigkeiten bringen, wenn wir die Pfeilfunktion mit window
verwenden. Wir haben schon einmal gesehen
sound
. setTimeout
setTimeout
saubereres Code mit Arrow -Funktionen und this
schreiben
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
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 neuererequestAnimationFrame
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 SierequestAnimationFrame
verwenden. Sie sollten nicht mehreresetTimeout
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 vonsetTimeout
als Parameter zurückgegebene Zeitüberschreitungs -ID. Zum Beispiel:const timeoutId = setTimeout(myFunction, 1000); clearTimeout(timeoutId);
-
Was ist der Unterschied zwischen
setTimeout
undsetInterval
?setTimeout
Planen Sie die Funktion, die nach der angegebenen Verz?gerung einmal ausgeführt werden soll, w?hrendsetInterval
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);
wobeicallback
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!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hei?e Themen

Java und JavaScript sind unterschiedliche Programmiersprachen, die jeweils für verschiedene Anwendungsszenarien geeignet sind. Java wird für die Entwicklung gro?er Unternehmen und mobiler Anwendungen verwendet, w?hrend JavaScript haupts?chlich für die Entwicklung von Webseiten verwendet wird.

JavaScriptComents AreseessentialFormaintaining, Lesen und GuidingCodeexexecution.1) einzelne Linecommments Arequickickexplanationen.2) Multi-LindexplainComproxlogicorProvedetailedDocumentation.3) InlinecommentsclarifyspecificPartsosensofCode.BestPracticic

Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.

PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf

Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.

Java und JavaScript sind verschiedene Programmiersprachen. 1.Java ist eine statisch typisierte und kompilierte Sprache, die für Unternehmensanwendungen und gro?e Systeme geeignet ist. 2. JavaScript ist ein dynamischer Typ und eine interpretierte Sprache, die haupts?chlich für die Webinteraktion und die Front-End-Entwicklung verwendet wird.
