Technische Fragen im Vorstellungsgespräch – Teil einer Ereignisschleife

Einführung

Hallo zusammen!

Wie der Titel schon sagt, werde ich heute über die Ereignisschleife sprechen.

Dies ist kein Thema, nach dem Interviewer oft direkt fragen (ich kann mich nur an zwei Gelegenheiten erinnern, bei denen sie mich gebeten haben, die Ereignisschleife zu erklären). ABER in den meisten Interviews werden Fragen gestellt, die damit zusammenhängen. Zum Beispiel:

• „Wenn ich das tue … wie sollte das Verhalten sein?“
• „Wenn mein Code so aussieht, was wird die Ausgabe sein?“
• „Warum erzeugt dieser Code diese Ausgabe?“

All diese Fragen lassen sich viel einfacher beantworten, wenn Sie verstehen, wie die Ereignisschleife funktioniert.

Ich bin ehrlich: Dieses Thema ist nicht mein Lieblingsthema. Ich bevorzuge viel lieber Fragen zum Verhalten von Code, als zu erklären, wie die Ereignisschleife 10 Minuten lang am Stück funktioniert.?

Lass uns eintauchen! ?

## Fragen
1. Was ist die Ereignisschleife?
2. Beispiele

---

Was ist die Ereignisschleife?

Kurze Antwort:

Die Ereignisschleife ist für die Verarbeitung asynchroner Aufgaben in der JavaScript-Laufzeit verantwortlich.

Um ehrlich zu sein, glaube ich nicht, dass diese Antwort ausreicht, um die Neugier eines Interviewers zu befriedigen, der nach der Ereignisschleife fragt. Deshalb möchte ich in diesem Beitrag tiefer in dieses Thema eintauchen.

Mehr als nur die Konzepte zu kennen, ist es wichtig zu verstehen, wie es funktioniert. Deshalb habe ich am Ende einige Beispiele hinzugefügt.

Theorie

Was ist die Ereignisschleife?

JavaScript verfügt über eine Laufzeit basierend auf einer Ereignisschleife, die für die Bearbeitung von Aufgaben verantwortlich ist. Jede Sprache hat eine einzigartige Laufzeit und ein wichtiger Punkt ist, dass JavaScript Single-Threaded ist.

Was bedeutet Single-Threaded?

Single-Threaded bedeutet, dass JavaScript jeweils nur eine Aufgabe verarbeiten kann. Aus diesem Grund ist die Ereignisschleife in JavaScript so wichtig. Es hilft, Aufgaben trotz dieser Single-Thread-Beschränkung effizient zu verwalten.

Komponenten der Runtime

Um die Ereignisschleife besser zu verstehen, schauen wir uns zunächst ihre Hauptkomponenten an:

Call Stack

Der Aufrufstapel ist eine Datenstruktur, die die von uns aufgerufenen Funktionen verfolgt. Man kann es sich wie einen Stapel Teller vorstellen: Wenn eine Funktion aufgerufen wird, wird sie dem Stapel hinzugefügt, und wenn sie fertig ist, wird sie vom Stapel entfernt.

Der Aufrufstapel arbeitet nach einem LIFO (Last-In-First-Out)-Prinzip, was bedeutet, dass JavaScript Funktionen in der Reihenfolge ausführt, in der sie gestapelt sind – vom obersten Element bis zum untersten, eins nach dem anderen einmal (denken Sie daran, JavaScript ist Single-Threaded).

Warteschlangen

In der Laufzeit von JavaScript haben wir Warteschlangen, die Listen der zu verarbeitenden Aufgaben enthalten. Aufgaben in diesen Warteschlangen warten, bis der Aufrufstapel leer ist.

• Aufgabenwarteschlange (oder Rückrufwarteschlange): In dieser Warteschlange werden Aufgaben wie setTimeout()- und setInterval()-Aufrufe gespeichert. Hier werden Aufgaben verarbeitet, nachdem der Aufrufstapel leer ist und alle Aufgaben in der Microtask-Warteschlange verarbeitet wurden. Weitere Beispiele für Aufgaben, die in dieser Warteschlange gespeichert sind, finden Sie auf MDN.

• Mikrotask-Warteschlange: Diese Warteschlange hat Priorität vor der Aufgabenwarteschlange. Es umfasst Mikrotasks wie Promise-Rückrufe und asynchrone Funktionen wie process.nextTick() und asynchrone Funktionen.

Die Aufgabenwarteschlange arbeitet auf einer FIFO-Basis (First-In-First-Out), was bedeutet, dass Aufgaben in der Reihenfolge verarbeitet werden, in der sie hinzugefügt werden, jedoch erst nach der Mikroaufgabe Die Warteschlange ist leer.

Ereignisschleife

Die Ereignisschleife ist ein Mechanismus, der die Ausführung von asynchronem Code verwaltet. Es beobachtet den Aufrufstapel und koordiniert zwischen dem Aufrufstapel und den Warteschlangen (Task Queue und Microtask Queue), um einen reibungslosen Ablauf des Codes zu gewährleisten.

Wie funktioniert es?

Lassen Sie uns den Ereignisschleifenprozess Schritt für Schritt durchgehen. Eine visuelle Darstellung finden Sie im Bild unten.

In diesem Beispiel:

• Der Call Stack hat eine Funktion.
• Die Microtask-Warteschlange enthält zwei Nachrichten.
• Die Aufgabenwarteschlange enthält eine Nachricht.

Schritt 1: Verarbeiten Sie den Aufrufstapel

1. Die Ereignisschleife beginnt mit der Betrachtung des Aufrufstapels.
2. Es findet eine Funktion im Stapel und beginnt mit der Ausführung.
3. Sobald diese Funktion abgeschlossen ist, wird sie aus dem Aufrufstapel entfernt.

Schritt 2: Verarbeiten Sie die Microtask-Warteschlange

1. Nachdem der Call Stack leer ist, überprüft die Ereignisschleife die Microtask Queue.
2. Es nimmt die erste Nachricht aus der Microtask-Warteschlange und verschiebt sie zur Ausführung an den Aufrufstapel.

1. Die Funktion wird ausgeführt und nach Abschluss aus dem Aufrufstapel entfernt.
2. Die Ereignisschleife geht dann zur nächsten Nachricht in der Microtask-Warteschlange und wiederholt den Vorgang.
3. Dies wird so lange fortgesetzt, bis keine Nachrichten mehr in der Microtask-Warteschlange vorhanden sind.

Schritt 3: Verarbeiten Sie die Aufgabenwarteschlange

1. Sobald sowohl der Aufrufstapel als auch die Mikrotask-Warteschlange leer sind, wechselt die Ereignisschleife zur Aufgabenwarteschlange.
2. Es wählt die erste Nachricht in der Aufgabenwarteschlange aus und fügt sie dem Anrufstapel hinzu.
3. Die Funktion wird ausgeführt und nach Abschluss aus dem Aufrufstapel entfernt.
4. Die Ereignisschleife setzt diesen Prozess mit jeder Aufgabe in der Aufgabenwarteschlange fort und stellt sicher, dass alle Aufgaben einzeln bearbeitet werden.

Durch Befolgen dieser Reihenfolge – Call Stack, dann Microtask Queue und schließlich Task Queue – hilft die Ereignisschleife JavaScript, asynchronen Code effizient zu verarbeiten, auch innerhalb seine Single-Threaded-Umgebung.

---

Beispiele

Da wir nun verstehen, wie die Ereignisschleife funktioniert und wie Aufgaben priorisiert werden, schauen wir uns einige Beispiele an.

Beispiel 1

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

Bevor Sie fortfahren, denken Sie über die Reihenfolge der Ausgabe nach.

✨Was erwartest du davon?✨

Lassen Sie uns jeden Teil des Codes aufschlüsseln, um zu verstehen, warum wir diese Ausgabe erhalten.

1. Das Versprechen schaffen

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• Hier erstellen wir ein neues Versprechen mit einer Rückruffunktion.
• Innerhalb dieser Funktion wird console.log('A') sofort ausgeführt, sodass "A" auf der Konsole ausgegeben wird.
• Nach der Protokollierung von „A“ wird das Versprechen mit dem Wert „B“ aufgelöst.
• JavaScript erkennt, dass es einen .then-Rückruf (d. h. showB) gibt, der ausgeführt werden sollte, sobald der Hauptaufrufstapel leer ist, und fügt daher showB zur Microtask-Warteschlange hinzu (da Versprechensauflösungen dorthin gehen).

2. setTimeout-Aufruf

setTimeout(function showC() {
  console.log('C');
}, 0);

• Die setTimeout-Funktion plant die Ausführung von showC nach 0 Millisekunden.
• JavaScript platziert showC in der Aufgabenwarteschlange, da es sich um eine timerbasierte Funktion handelt.

3. a.dann Rückruf

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

• Diese Zeile registriert einen .then-Handler für das Versprechen, das wir bereits im vorherigen Schritt gelöst haben (resolve('B')).
• Da das Versprechen gelöst ist, wird showB (der .then-Rückruf) zur Microtask-Warteschlange hinzugefügt.

4. Definieren von d

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• Diese Zeile definiert lediglich die Funktion showD, führt sie aber noch nicht aus, sodass hier nichts passiert.

5. Aufruf von d()

setTimeout(function showC() {
  console.log('C');
}, 0);

• Jetzt rufen wir d() auf, das zum Call Stack hinzugefügt und ausgeführt wird. Dies führt zu console.log('D'), sodass "D" auf der Konsole ausgegeben wird.

Endgültige Ausgabereihenfolge:

a.then(function showB(b) {
  console.log(b);
});

GIF als Referenz

Interaktives Beispiel

Beispiel 2

const d = function showD() {
  console.log('D');
};

Nehmen Sie sich noch einmal einen Moment Zeit, um über die Reihenfolge der Ausgabe nachzudenken.

✨Was erwartest du davon?✨

Lass uns mit der Erklärung fortfahren...

1. Protokollierung „Start!“

d();

• Diese Zeile wird zum Aufrufstapel hinzugefügt und sofort ausgeführt.
• Als Ergebnis wird „Start!“ auf der Konsole ausgegeben.

1. setTimeout-Aufruf

A
D
B
C

• Die setTimeout-Funktion plant die Ausführung von showTimeout nach 0 Millisekunden.
• JavaScript platziert showTimeout in der Aufgabenwarteschlange, da es sich um eine timerbasierte Funktion handelt.

3. Versprechen Sie eine Lösung

console.log("Start!");

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

Promise.resolve("Promise!")
  .then(function showPromise(res) {
    console.log(res);
  });

console.log("End!");

• Das Versprechen wird sofort mit dem Wert „Versprechen!“ gelöst.
• JavaScript platziert showPromise (den .then-Rückruf) in der Mikrotask-Warteschlange, da Versprechen nach der Auflösung in die Mikrotask-Warteschlange gelangen.

4. Protokollierung „Ende!“

console.log("Start!");

• Diese Zeile wird zum Aufrufstapel hinzugefügt und sofort ausgeführt.
• Als Ergebnis wird „End!“ auf der Konsole ausgegeben.

Endgültige Ausgabereihenfolge:

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

GIF als Referenz

Interaktives Beispiel

Ende

Dieses Kapitel war nicht zu lang, aber ich hoffe, diese Beispiele haben Ihnen geholfen zu verstehen, wie die Ereignisschleife funktioniert.

Ich empfehle dringend, mit der interaktiven Seite zu experimentieren, um andere Beispiele zu analysieren. Das Herumspielen auf dieser Seite kann es viel einfacher machen, die Ereignisschleife in Aktion zu verstehen.

Vielen Dank für all die Liebe in meinen vorherigen Beiträgen!

Bis nächste Woche! ?

Tschüss

Das obige ist der detaillierte Inhalt vonTechnische Fragen im Vorstellungsgespräch – Teil einer Ereignisschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!