Erklärung der Javascript-Interviewfrage – Asynchrones Verhalten

Asynchrones Verhalten von JavaScript mit setTimeout

Einführung

In diesem Artikel werden wir einen faszinierenden JavaScript-Code untersuchen, der die asynchrone Natur der Sprache demonstriert, insbesondere wie Schließungen und die Funktion setTimeout zusammenarbeiten. Wenn Sie sich jemals gefragt haben, warum Ihre Schleife unerwartete Ergebnisse ausgibt, sind Sie hier richtig!

Schlüsselkonzept

Bevor wir uns mit dem Code befassen, besprechen wir einige Konzepte.

Asynchrone Programmierung:

JavaScript ist Single-Threaded, was bedeutet, dass es jeweils nur einen Code ausführen kann. Es kann jedoch asynchrone Vorgänge verarbeiten, sodass bestimmte Aufgaben im Hintergrund ausgeführt werden können, während der Hauptthread weiterhin ausgeführt wird.

SetTimeout

Diese Funktion wird verwendet, um einen Codeabschnitt nach einer bestimmten Verzögerung auszuführen. Es benötigt zwei Parameter: eine Rückruffunktion und eine Verzögerung in Millisekunden.

Schließungen

Ein Abschluss ist eine Funktion, die den Zugriff auf ihren lexikalischen Bereich behält, auch wenn die Funktion außerhalb dieses Bereichs ausgeführt wird. Dies ist entscheidend für das Verständnis, wie in asynchronen Rückrufen auf Variablen zugegriffen wird.

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Bevor wir uns mit den Details befassen, nehmen Sie sich einen Moment Zeit und schauen Sie sich dieses Code-Snippet an. Versuchen Sie zu erraten, wie die Ausgabe auf der Grundlage Ihres aktuellen Verständnisses aussehen wird. Dieser Ansatz trägt nicht nur dazu bei, Ihre JavaScript-Kenntnisse zu verbessern, sondern macht auch die folgende Erklärung viel aussagekräftiger

Überlegen Sie, wie JavaScript jede Zeile verarbeitet. Wenn Sie Ihre Vermutung gemacht haben, lesen Sie weiter, um zu sehen, ob Sie richtig liegen!

Erläuterung

Lassen Sie den Code Schritt für Schritt aufschlüsseln:

Schleifenausführung: Die Schleife wird fünfmal ausgeführt, wobei i von 0 auf 4 erhöht wird.

setTimeout: Für jeden Wert von i ist ein setTimeout geplant, um i nach i * 1000 Millisekunden zu protokollieren.

Abschluss: Wenn die „setTimeout“-Rückrufe ausgeführt werden, ist die Schleife bereits abgeschlossen und „i“ hat einen Endwert von 5. Daher werden alle Rückrufe als „5“ protokolliert.

Was Sie erwarten könnten

0
1
2
3
4

Was tatsächlich passiert

5
5
5
5
5

Dies ist jedoch nicht die tatsächliche Ausgabe, die Sie sehen würden. Der Grund dafür ist ein häufiges JavaScript-Verhalten im Zusammenhang mit dem Bereich der i-Variablen.

Im bereitgestellten Code wird die Variable i mit var deklariert, was bedeutet, dass sie einen Funktionsumfang hat. Wenn die Funktionen „setTimeout()“ ausgeführt werden, ist die Schleife bereits abgeschlossen und der Wert von „i“ beträgt 5. Daher protokollieren alle Funktionen „setTimeout()“ unabhängig von der Verzögerung den Wert 5 in der Konsole.

Behebung des Problems

Um die erwartete Ausgabe von 0, 1, 2, 3, 4, zu erreichen

• Sie können einen sofort aufgerufenen Funktionsausdruck (IIFE) verwenden, um für jede Iteration einen neuen Bereich zu erstellen.
• Wir können das Schlüsselwort let anstelle von var verwenden.

Lösung

Sofort aufgerufener Funktionsausdruck

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

Jetzt erfasst jedes setTimeout den aktuellen Wert von i und die Ausgabe lautet:

0
1
2
3
4

Durch die Verwendung des Let-Schlüsselworts

Das Schlüsselwort „let“ erstellt eine Variable mit Blockbereich, was bedeutet, dass jede Iteration der Schleife eine eigene Kopie der Variablen „i“ hat und die Funktionen „setTimeout()“ den korrekten Wert von „i“ für jede Iteration erfassen.

Abschluss

Um effektiven Code zu schreiben, ist es wichtig zu verstehen, wie JavaScript mit asynchronen Vorgängen und Abschlüssen umgeht. Das ursprüngliche Code-Snippet dient als hervorragendes Beispiel dafür, wie die Funktion „setTimeout“ mit der Schleifenvariablen „i“ interagiert. Durch die Verwendung eines IIFE können wir sicherstellen, dass bei jedem Timeout der richtige Wert protokolliert wird. Wenn Sie also das nächste Mal auf eine ähnliche Situation stoßen, denken Sie an die Macht von Schließungen und daran, wie sie Ihnen bei der Verwaltung von asynchronem Verhalten in JavaScript helfen können

Mission erfüllt: Den Code enträtseln!

Ich hoffe, diese Erklärung hat nicht nur den Code verdeutlicht, sondern auch die Neugier geweckt, ihn weiter zu erkunden. JavaScript steckt voller Überraschungen und leistungsstarker Tools, und jedes Stück, das Sie lernen, bringt Sie Ihrer Beherrschung näher.

Danke fürs Lesen

Ich hoffe, Ihnen hat diese Aufschlüsselung gefallen! Teilen Sie Ihre Gedanken, Fragen oder Ideen für zukünftige Themen gerne in den Kommentaren mit.

Viel Spaß beim Programmieren

Wenn Ihnen der Artikel gefallen hat und Sie Ihre Unterstützung zeigen möchten, achten Sie darauf:

Folge mir

Das obige ist der detaillierte Inhalt vonErklärung der Javascript-Interviewfrage – Asynchrones Verhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!