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:
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
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.
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.
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.
Um die Ereignisschleife besser zu verstehen, schauen wir uns zunächst ihre Hauptkomponenten an:
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).
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.
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.
Lassen Sie uns den Ereignisschleifenprozess Schritt für Schritt durchgehen. Eine visuelle Darstellung finden Sie im Bild unten.
In diesem Beispiel:
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.
Da wir nun verstehen, wie die Ereignisschleife funktioniert und wie Aufgaben priorisiert werden, schauen wir uns einige Beispiele an.
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'); });
2. setTimeout-Aufruf
setTimeout(function showC() { console.log('C'); }, 0);
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();
4. Definieren von d
const a = new Promise(function showA(resolve) { console.log('A'); resolve('B'); });
5. Aufruf von d()
setTimeout(function showC() { console.log('C'); }, 0);
Endgültige Ausgabereihenfolge:
a.then(function showB(b) { console.log(b); });
GIF als Referenz
Interaktives Beispiel
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();
A D B C
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!");
4. Protokollierung „Ende!“
console.log("Start!");
Endgültige Ausgabereihenfolge:
setTimeout(function showTimeout() { console.log("Timeout!"); }, 0);
GIF als Referenz
Interaktives Beispiel
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!