Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Node.js für ASP.NET-Entwickler

Der JavaScript Event Loop

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein wichtiger Bestandteil des Call Stacks ist der "Manager", also der Event Loop. Der kümmert sich laufend darum, dass der Call Stack seine Arbeit bekommt.

Transkript

Eine weitere wichtige Komponente von "Call Stack" ist der "Event Loop". Und auch das müssen wir erst mal verstehen, was da so passiert. Und zwar haben wir neben dem "Call Stack" dann zusätzlich eine JavaScript Engine API, wo, zum Beispiel, dann Vorgänge ausgeführt werden, wie die "setTimeout"-Funktion von JavaScript oder, zum Beispiel, so was wie die "alert"-Funktion, dass eine MessageBox angezeigt werden soll, oder irgendwelche anderen relevanten Funktionen, die nichts mit dem JavaScript- Sprachstandard zu tun haben. Die werden hier über die JavaScript Engine API bereitgestellt. Dann haben wir ganz unten eine sogenannte "Task Queue". Also einen Warteschlangenbereich. Und dann haben wir den sogenannten Manager, den "Event Loop", der sich dann eben permanent darum kümmert, dass der "Call Stack" dann seine Arbeit bekommt. Und damit wir verstehen, wie die ganze Zusammenarbeit genau funktioniert, schauen wir uns das Ganze doch mal zur Laufzeit an. Und zwar haben wir wieder auf der rechten Seite unseren JavaScript-Code, wo drei Mal etwas in der Konsole, rechts unten, ausgegeben werden soll, ein Mal zu Beginn, dann ein Mal am Ende und dann mitten drin sehen wir, dass eine "Timeout"-Funktion aufgerufen werden soll, die dann nach null Millisekunden dann auch etwas ausgeben sollte. Jetzt können wir hier ein kleines Quizspiel miteinbauen. Sie sollen einfach mal jetzt schon mal raten, was auf der Ausgabe erscheinen wird, wenn ich den JavaScript-Code ausführe. Im Prinzip müsste ja jetzt dann: "Hello World Ohh!" erscheinen. Weil bei "setTimeout" natürlich null Millisekunden Verzögerung mitgegeben werden. Schauen wir uns das doch jetzt mal zur Laufzeit genau an, ob das auch genau so passiert. Und zwar wird wieder die "main"-Function, wo unser JavaScript-Code enthalten ist, ausgeführt. An erster Stelle landen wir dann bei "console.log" mit "Hello". Das kommt natürlich wieder auf den "Call Stack". Der wird von oben nach unten sofort bearbeitet, und wir bekommen die Ausgabe "Hello". Okay. An zweiter Stelle erscheint die "setTimeout"-Function. Die kommt auch wieder auf dem "Call Stack", und der wird direkt aufgerufen. Und die "setTimeout"-Funktion ist ja ein Bestandteil der JavaScript Engine API, und zwar läuft da jetzt der sogenannte "timer". Der "timer" sieht aber, -- okay --, dass sind null Millisekunden. Das heißt, meine Arbeit ist hiermit erledigt. Ich rufe mal die "callback"-Funktion auf. Und zwar nicht direkt, sondern ich lege diese eben in den Warteschlangenbereich, also, in den "Task Queue". Und die "setTimeout"-Funktion ist somit abgearbeitet und fertig, und der "Call Stack" muss ja dennoch von oben nach unten weiter bearbeitet werden. Das bedeutet, wir landen jetzt erst in "console.log("Ohh!")". Diese Funktion wird mit auf den "Call Stack" gelegt, diese wird auch sofort abgearbeitet, und wir haben auf der Ausgabe, rechts unten, ein "Hello Ohh!". "console.log" ist fertig, und in dem Fall dann auch die "main"-Function. Das bedeutet, der Manager unten, der "Event Loop", kümmert sich immer darum, wenn der "Call Stack" erst wieder frei ist, wenn also nichts mehr da ist, nur dann wird alles, was im Warteschlangenbereich ist, also in den "Task Queue", nacheinander wieder in den "Call Stack" gelegt. Und dann wird das Ganze natürlich direkt wieder von oben nach unten abgearbeitet. Wir bekommen dann die Ausgabe "Hello Ohh! World" und der "Call Stack" wäre wieder fertig. Und wäre jetzt ein weiteres Element in der "Task Queue", würde dann der "Event Loop" sich darum kümmern, dass der "Call Stack" wieder gefüllt wird. Und das werden Sie auf jeden Fall schon mal erlebt haben. Sie klicken auf einen Button innerhalb der Webanwendung und es passiert gar nichts. Sie klicken fünf Mal auf den Button, es passiert immer noch nichts. Und irgendwann mal, so nach 20 Sekunden, erscheint 300 Mal dann die MessageBox mit irgendeinen Hinweis, oder die Seite wird dann 500 Mal geöffnet, und genau aus diesem Prinzip passiert dieser Effekt. Das heißt, jedes Mal wenn auf den Button geklickt wird, bekommt die JavaScript Engine API im Hintergrund das Ganze mit, aber der "Call Stack" ist gerade mit anderen Dingen beschäftigt, und erst wenn eben die Dinge abgearbeitet wurden, hat der "Event Loop" erst mal die ganzen verarbeiteten Daten weitergegeben und das ist eben der Grund, wieso es dann häufig auch mal auf so Webseiten Probleme geben kann. Deswegen ist es auch wichtig, dass man einfach mal versteht, wie der "Call Stack" mit dem "Event Loop" funktioniert.

Node.js für ASP.NET-Entwickler

Sehen Sie, wie Sie den Umstieg auf auf native JavaScript-Entiwcklung mit Node.js erfolgreich meistern.

2 Std. 52 min (31 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:15.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!