{"id":16678,"date":"2025-01-25T22:51:24","date_gmt":"2025-01-25T19:21:24","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=16678"},"modified":"2025-01-25T22:51:24","modified_gmt":"2025-01-25T19:21:24","slug":"understanding-the-event-loop-callbacks","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/understanding-the-event-loop-callbacks\/","title":{"rendered":"Die Ereignisschleife und R\u00fcckruffunktionen verstehen"},"content":{"rendered":"

Einf\u00fchrung<\/h2>\n

In den Anf\u00e4ngen des Internets bestanden Websites oft aus statischen Daten auf einer HTML-Seite. Da Webanwendungen jedoch interaktiver und dynamischer geworden sind, ist es zunehmend notwendig, rechenintensive Operationen durchzuf\u00fchren, wie beispielsweise externe Netzwerkanfragen zum Abrufen von API-Daten. Um diese Operationen in JavaScript auszuf\u00fchren, muss ein Entwickler asynchrone Programmiertechniken anwenden.<\/p>\n

Da JavaScript eine Single-Thread-Programmiersprache mit einem nebenl\u00e4ufigen Ausf\u00fchrungsmodell ist, das Operationen nacheinander verarbeitet, kann sie immer nur einen Befehl gleichzeitig bearbeiten. Eine Aktion wie das Anfordern von Daten von einer API kann jedoch je nach Gr\u00f6\u00dfe der angeforderten Daten, Geschwindigkeit der Netzwerkverbindung und anderen Faktoren eine unbestimmte Zeit in Anspruch nehmen. W\u00fcrden API-Aufrufe synchron erfolgen, k\u00f6nnte der Browser keine Benutzereingaben wie Scrollen oder Klicken auf eine Schaltfl\u00e4che verarbeiten, bis diese Operation abgeschlossen ist. Dies wird als Blockierung bezeichnet.<\/p>\n

Um Blockierungen zu vermeiden, bietet die Browserumgebung zahlreiche asynchrone Web-APIs, auf die JavaScript zugreifen kann. Das bedeutet, dass diese APIs parallel zu anderen Operationen anstatt sequenziell ausgef\u00fchrt werden k\u00f6nnen. Dies ist vorteilhaft, da der Benutzer den Browser w\u00e4hrend der Verarbeitung der asynchronen Operation wie gewohnt weiter nutzen kann.<\/p>\n

Ereignisschleife<\/h2>\n

Dieser Abschnitt erkl\u00e4rt, wie JavaScript asynchronen Code mithilfe der Ereignisschleife verarbeitet. Zun\u00e4chst wird die Funktionsweise der Ereignisschleife anhand einer Demonstration veranschaulicht, anschlie\u00dfend werden zwei ihrer Elemente erl\u00e4utert: der Stack und die Queue.<\/p>\n

JavaScript-Code, der keine der asynchronen Web-APIs verwendet, wird synchron ausgef\u00fchrt \u2013 nacheinander und sequenziell. Dies wird durch folgenden Beispielcode veranschaulicht, der drei Funktionen aufruft, von denen jede eine Zahl in der Konsole ausgibt:<\/p>\n

\n
\/\/ Define three example functions\r\nfunction first() {\r\nconsole.log(1)\r\n}\r\n\r\nfunction second() {\r\nconsole.log(2)\r\n}\r\n\r\nfunction third() {\r\nconsole.log(3)\r\n}<\/code><\/pre>\n<\/div>\n
In diesem Code definieren Sie drei Funktionen, die Zahlen mit console.log() ausgeben.<\/p>\n
Schreiben Sie anschlie\u00dfend die Funktionsaufrufe:<\/p>\n
\n
\/\/ Execute the functions\r\nfirst()\r\nsecond()\r\nthird()<\/code><\/pre>\n<\/div>\n
Die Ausgabe basiert auf der Reihenfolge, in der die Funktionen aufgerufen werden \u2013 first(), second(), dann three():<\/p>\n
\n
Output\r\n1\r\n2\r\n3<\/code><\/pre>\n<\/div>\n
Bei der Verwendung einer asynchronen Web-API werden die Regeln komplexer. Eine integrierte API, mit der Sie experimentieren k\u00f6nnen, ist `setTimeout`. Diese Funktion setzt einen Timer und f\u00fchrt nach einer festgelegten Zeitspanne eine Aktion aus. `setTimeout` muss asynchron sein, da sonst der gesamte Browser w\u00e4hrend des Wartens einfriert, was zu einer schlechten Benutzererfahrung f\u00fchrt.<\/p>\n
Um eine asynchrone Anfrage zu simulieren, f\u00fcgen Sie der zweiten Funktion setTimeout hinzu:<\/p>\n
\n
\/\/ Define three example functions, but one of them contains asynchronous code\r\nfunction first() {\r\nconsole.log(1)\r\n}\r\n\r\nfunction second() {\r\nsetTimeout(() => {\r\nconsole.log(2)\r\n}, 0)\r\n}\r\n\r\nfunction third() {\r\nconsole.log(3)\r\n}<\/code><\/pre>\n<\/div>\n
`setTimeout` ben\u00f6tigt zwei Argumente: eine asynchron auszuf\u00fchrende Funktion und die Wartezeit vor dem Aufruf dieser Funktion. In diesem Codebeispiel wird `console.log` in eine anonyme Funktion ausgelagert und an `setTimeout` \u00fcbergeben. Anschlie\u00dfend wird die Funktion so konfiguriert, dass sie nach 0 Millisekunden ausgef\u00fchrt wird.<\/p>\n
Rufen Sie nun die Funktionen wie zuvor auf:<\/p>\n
\n
\/\/ Execute the functions\r\nfirst()\r\nsecond()\r\nthird()<\/code><\/pre>\n<\/div>\n
Man k\u00f6nnte erwarten, dass die drei Funktionen die Zahlen weiterhin in der richtigen Reihenfolge ausgeben, wenn setTimeout auf 0 gesetzt wird. Da die Ausf\u00fchrung jedoch asynchron erfolgt, wird die letzte Zahl mit einem Break-Befehl ausgegeben.<\/p>\n
\n
Output\r\n1\r\n3\r\n2<\/code><\/pre>\n<\/div>\n
Ob Sie den Timer auf null Sekunden oder f\u00fcnf Minuten einstellen, spielt keine Rolle \u2013 `console.log`, das von asynchronem Code aufgerufen wird, wird erst nach den synchronen Funktionen der obersten Ebene ausgef\u00fchrt. Dies liegt daran, dass die JavaScript-Hostumgebung, in diesem Fall der Browser, die sogenannte Ereignisschleife verwendet, um gleichzeitige oder parallele Ereignisse zu verarbeiten. Da JavaScript immer nur einen Befehl gleichzeitig ausf\u00fchren kann, ben\u00f6tigt es die Ereignisschleife, um zu wissen, wann ein bestimmter Befehl ausgef\u00fchrt wird. Die Ereignisschleife realisiert dies mithilfe von Stapeln und Warteschlangen.<\/p>\n
Stapel<\/h5>\n
Der Stack, auch Aufrufstapel genannt, speichert den Zustand der aktuell ausgef\u00fchrten Funktion. Falls Ihnen das Konzept eines Stacks noch nicht gel\u00e4ufig ist, k\u00f6nnen Sie ihn sich wie ein Array mit dem LIFO-Prinzip (Last In, First Out) vorstellen. Das bedeutet, dass Sie nur Elemente vom unteren Ende des Stacks hinzuf\u00fcgen oder entfernen k\u00f6nnen. JavaScript f\u00fchrt den aktuellen Frame (bzw. den aktuellen Funktionsaufruf in einer bestimmten Umgebung) auf dem Stack aus, entfernt ihn anschlie\u00dfend und f\u00e4hrt mit dem n\u00e4chsten Frame fort.<\/p>\n
Bei einem Beispiel, das ausschlie\u00dflich synchronen Code enth\u00e4lt, f\u00fchrt der Browser diesen in folgender Reihenfolge aus:<\/p>\n
    \n
  • Erste()<\/strong> F\u00fcge die Funktion zum Stack hinzu, f\u00fchre die Funktion first() aus, die 1 in der Konsole ausgibt, und entferne anschlie\u00dfend first() vom Stack.<\/li>\n
  • zweite()<\/strong> F\u00fcge die Funktion dem Stapel hinzu, f\u00fchre die Funktion second() aus, die 2 auf der Konsole ausgibt, und entferne die Funktion second() vom Stapel.<\/li>\n
  • dritte ()<\/strong> F\u00fcge es dem Stack hinzu, f\u00fchre third() aus, das 3 in der Konsole ausgibt, und entferne third() vom Stack.<\/li>\n<\/ul>\n
    Das zweite Beispiel mit setTimeout sieht wie folgt aus:<\/p>\n
      \n
    • Erste()<\/strong> F\u00fcge die Funktion zum Stack hinzu, f\u00fchre die Funktion first() aus, die 1 in der Konsole ausgibt, und entferne anschlie\u00dfend first() vom Stack.<\/li>\n
    • zweite()<\/strong> F\u00fcge etwas zum Stack hinzu und f\u00fchre second() aus.\n
        \n
      • F\u00fcge setTimeout() zum Stack hinzu, f\u00fchre die Web-API-Funktion setTimeout() aus, die den Timer startet und die anonyme Funktion zur Warteschlange hinzuf\u00fcgt, und entferne setTimeout() vom Stack.<\/li>\n<\/ul>\n<\/li>\n
      • zweite()<\/strong> Vom Stapel entfernen.<\/li>\n
      • Dritte ()<\/strong> F\u00fcge es dem Stack hinzu, f\u00fchre third() aus, das 3 in der Konsole ausgibt, und entferne third() vom Stack.<\/li>\n
      • Die Ereignisschleife pr\u00fcft die Warteschlange auf ausstehende Nachrichten, findet die anonyme Funktion aus setTimeout(), f\u00fcgt die Funktion dem Stapel hinzu, die 2 in der Konsole protokolliert, und entfernt sie dann vom Stapel.<\/li>\n<\/ul>\n
        Mit setTimeout f\u00fchrt eine asynchrone Web-API das Konzept einer Warteschlange ein, das in diesem Tutorial sp\u00e4ter behandelt wird.<\/p>\n
        Warteschlange<\/h5>\n
        Eine Warteschlange, auch Nachrichtenwarteschlange oder Aufgabenwarteschlange genannt, ist ein Wartebereich f\u00fcr Funktionen. Wenn der Aufrufstapel leer ist, pr\u00fcft die Ereignisschleife die Warteschlange auf ausstehende Nachrichten, beginnend mit der \u00e4ltesten. Wird eine gefunden, f\u00fcgt sie diese dem Stapel hinzu, woraufhin die in der Nachricht enthaltene Funktion ausgef\u00fchrt wird.<\/p>\n
        Im Beispiel mit `setTimeout` wird die anonyme Funktion unmittelbar nach der restlichen Ausf\u00fchrung des Hauptprogramms ausgef\u00fchrt, da der Timer auf 0 Sekunden gesetzt wurde. Wichtig ist, dass der Timer nicht bedeutet, dass der Code exakt bei 0 Sekunden oder zu einem bestimmten Zeitpunkt ausgef\u00fchrt wird, sondern dass die anonyme Funktion w\u00e4hrend dieser Zeit in die Warteschlange eingereiht wird. Dieses Warteschlangensystem ist notwendig, da die Ausf\u00fchrung der aktuell ausgef\u00fchrten Funktion unterbrochen werden w\u00fcrde, wenn der Timer die anonyme Funktion nach Ablauf des Timers direkt auf den Stack legen w\u00fcrde. Dies k\u00f6nnte unbeabsichtigte und unvorhersehbare Folgen haben.<\/p>\n
        Hinweis: Es gibt au\u00dferdem eine weitere Warteschlange, die sogenannte Job- oder Mikrotask-Warteschlange, die Promises verarbeitet. Mikrotasks wie Promises werden mit h\u00f6herer Priorit\u00e4t ausgef\u00fchrt als Makrotasks wie setTimeout.<\/span><\/p>\n
        Nachdem Sie nun wissen, wie die Ereignisschleife mithilfe von Stack und Queue die Ausf\u00fchrungsreihenfolge des Codes steuert, geht es im n\u00e4chsten Schritt darum, die Ausf\u00fchrungsreihenfolge in Ihrem Code zu kontrollieren. Dazu lernen Sie zun\u00e4chst die wichtigste Methode kennen, um sicherzustellen, dass die Ereignisschleife asynchronen Code korrekt verarbeitet: Callback-Funktionen.<\/span><\/p>\n
        Callback-Funktionen<\/h2>\n
        Im Beispiel mit `setTimeout` wird die Funktion mit dem Timeout erst nach allen anderen Funktionen im Hauptkontext der obersten Ausf\u00fchrungsebene ausgef\u00fchrt. Um jedoch sicherzustellen, dass eine der Funktionen, beispielsweise die dritte Funktion, nach dem Timeout ausgef\u00fchrt wird, m\u00fcssen Sie asynchrone Programmiertechniken verwenden. Das Timeout kann hier einen asynchronen API-Aufruf repr\u00e4sentieren, der Daten liefert. Sie m\u00f6chten mit den Daten aus dem API-Aufruf arbeiten, m\u00fcssen aber zun\u00e4chst sicherstellen, dass die Daten zur\u00fcckgegeben wurden.<\/p>\n
        Die Hauptl\u00f6sung f\u00fcr dieses Problem besteht in der Verwendung von Callback-Funktionen. Callback-Funktionen haben keine spezielle Syntax. Sie sind einfach Funktionen, die als Argument an eine andere Funktion \u00fcbergeben werden. Eine Funktion, die eine andere Funktion als Argument akzeptiert, wird als Funktion h\u00f6herer Ordnung bezeichnet. Gem\u00e4\u00df dieser Definition kann jede Funktion aufgerufen werden, wenn sie als Argument \u00fcbergeben wird. Telefongespr\u00e4che sind zwar nicht von Natur aus asynchron, k\u00f6nnen aber f\u00fcr asynchrone Zwecke genutzt werden.<\/p>\n
        Hier ist ein Syntaxbeispiel f\u00fcr eine Funktion h\u00f6herer Ordnung und einen Callback:<\/p>\n
        \n
        \/\/ A function\r\nfunction fn() {\r\nconsole.log('Just a function')\r\n}\r\n\r\n\/\/ A function that takes another function as an argument\r\nfunction higherOrderFunction(callback) {\r\n\/\/ When you call a function that is passed as an argument, it is referred to as a callback\r\ncallback()\r\n}\r\n\r\n\/\/ Passing a function\r\nhigherOrderFunction(fn)<\/code><\/pre>\n<\/div>\n
        In diesem Code definieren Sie eine Funktion fn, definieren eine Funktion aboveOrderFunction, die eine Callback-Funktion als Argument entgegennimmt, und \u00fcbergeben fn als Callback an aboveOrderFunction.<\/p>\n
        Die Ausf\u00fchrung dieses Codes bewirkt Folgendes:<\/p>\n
        \n
        Output\r\nJust a function<\/code><\/pre>\n<\/div>\n
        Kehren wir zu den ersten, zweiten und dritten Funktionen mit setTimeout zur\u00fcck. Hier ist der bisherige Stand:<\/p>\n
        \n
        function first() {\r\nconsole.log(1)\r\n}\r\n\r\nfunction second() {\r\nsetTimeout(() => {\r\nconsole.log(2)\r\n}, 0)\r\n}\r\n\r\nfunction third() {\r\nconsole.log(3)\r\n}<\/code><\/pre>\n<\/div>\n
        Die Aufgabe besteht darin, die dritte Funktion so zu steuern, dass ihre Ausf\u00fchrung immer so lange verz\u00f6gert wird, bis die asynchrone Aktion in der zweiten Funktion abgeschlossen ist. Hier kommen Callback-Funktionen ins Spiel. Anstatt die erste, zweite und dritte Funktion jeweils auf oberster Ebene auszuf\u00fchren, wird die dritte Funktion als Argument an die zweite \u00fcbergeben. Die zweite Funktion f\u00fchrt den Callback aus, nachdem die asynchrone Aktion abgeschlossen ist.<\/p>\n
        Hier sind drei Funktionen, die mit einer Callback-Funktion implementiert wurden:<\/p>\n
        \n
        \/\/ Define three functions\r\nfunction first() {\r\nconsole.log(1)\r\n}\r\n\r\nfunction second(callback) {\r\nsetTimeout(() => {\r\nconsole.log(2)\r\n\r\n\/\/ Execute the callback function\r\ncallback()\r\n}, 0)\r\n}\r\n\r\nfunction third() {\r\nconsole.log(3)\r\n}<\/code><\/pre>\n<\/div>\n
        F\u00fchre nun den ersten und zweiten Schritt aus und \u00fcbergib anschlie\u00dfend den dritten Schritt als Argument an den zweiten:<\/p>\n
        \n
        first()\r\nsecond(third)<\/code><\/pre>\n<\/div>\n
        Nach Ausf\u00fchrung dieses Codeblocks erhalten Sie folgende Ausgabe:<\/p>\n
        \n
        Output\r\n1\r\n2\r\n3<\/code><\/pre>\n<\/div>\n
        Zuerst wird 1 ausgegeben, und nachdem der Timer abgelaufen ist (in diesem Fall null Sekunden, aber Sie k\u00f6nnen ihn auf einen beliebigen Wert \u00e4ndern), wird 2 ausgegeben, und dann 3. Arbeiten Sie, bis die asynchrone Web-API (setTimeout) abgeschlossen ist.<\/p>\n
        Der entscheidende Punkt ist, dass Callback-Funktionen nicht asynchron sind \u2013 `setTimeout` ist eine asynchrone Web-API, die f\u00fcr die Verarbeitung asynchroner Aufgaben zust\u00e4ndig ist. Callbacks erm\u00f6glichen es lediglich, benachrichtigt zu werden, wenn eine asynchrone Aufgabe abgeschlossen ist, und den Erfolg oder Misserfolg dieser Aufgabe zu verarbeiten.<\/p>\n
        Nachdem Sie nun gelernt haben, wie man Callbacks zur Ausf\u00fchrung asynchroner Aufgaben verwendet, erkl\u00e4rt der n\u00e4chste Abschnitt die Probleme, die mit der Verschachtelung zu vieler Aufrufe und der Entstehung einer \u201cPyramide des Verderbens\u201d verbunden sind.<\/p>\n
        Verschachtelter R\u00fcckruf und Pyramide des Schreckens<\/h2>\n
        Callback-Funktionen sind eine effektive Methode, um sicherzustellen, dass eine Funktion so lange verz\u00f6gert wird, bis eine andere Funktion abgeschlossen ist und Daten zur\u00fcckgibt. Aufgrund der verschachtelten Struktur von Callbacks kann der Code jedoch schnell un\u00fcbersichtlich werden, wenn viele aufeinanderfolgende asynchrone Anfragen voneinander abh\u00e4ngen. Dies war f\u00fcr fr\u00fche JavaScript-Entwickler ein gro\u00dfes \u00c4rgernis, und so wird Code mit verschachtelten Aufrufen oft als \u201cPyramide der Qualen\u201d oder \u201cCallback-H\u00f6lle\u201d bezeichnet.<\/p>\n
        Hier ist eine Demonstration verschachtelter R\u00fcckruffunktionen:<\/p>\n
        \n
        function pyramidOfDoom() {\r\nsetTimeout(() => {\r\nconsole.log(1)\r\nsetTimeout(() => {\r\nconsole.log(2)\r\nsetTimeout(() => {\r\nconsole.log(3)\r\n}, 500)\r\n}, 2000)\r\n}, 1000)\r\n}<\/code><\/pre>\n<\/div>\n
        In diesem Code wird jeder neue setTimeout-Aufruf in eine Funktion h\u00f6herer Ordnung eingebettet, wodurch eine Pyramide immer tieferer Aufrufe entsteht. Die Ausf\u00fchrung dieses Codes f\u00fchrt zu folgendem Ergebnis:<\/p>\n
        \n
        Output\r\n1\r\n2\r\n3<\/code><\/pre>\n<\/div>\n
        In der Praxis, mit realem asynchronem Code, kann dies deutlich komplexer werden. Sie m\u00fcssen wahrscheinlich Fehler im asynchronen Code behandeln und anschlie\u00dfend Daten aus jeder Antwort an die n\u00e4chste Anfrage weitergeben. Die Verwendung von Callbacks erschwert die Lesbarkeit und Wartung Ihres Codes.<\/p>\n
        Hier ist ein praktikables Beispiel f\u00fcr eine realistischere \u201cPyramide des Verderbens\u201d, mit der Sie experimentieren k\u00f6nnen:<\/p>\n
        \n
        \/\/ Example asynchronous function\r\nfunction asynchronousRequest(args, callback) {\r\n\/\/ Throw an error if no arguments are passed\r\nif (!args) {\r\nreturn callback(new Error('Whoa! Something went wrong.'))\r\n} else {\r\nreturn setTimeout(\r\n\/\/ Just adding in a random number so it seems like the contrived asynchronous function\r\n\/\/ returned different data\r\n() => callback(null, {body: args + ' ' + Math.floor(Math.random() * 10)}),\r\n500,\r\n)\r\n}\r\n}\r\n\/\/ Nested asynchronous requests\r\nfunction callbackHell() {\r\nasynchronousRequest('First', function first(error, response) {\r\nif (error) {\r\nconsole.log(error)\r\nreturn\r\n}\r\nconsole.log(response.body)\r\nasynchronousRequest('Second', function second(error, response) {\r\nif (error) {\r\nconsole.log(error)\r\nreturn\r\n}\r\nconsole.log(response.body)\r\nasynchronousRequest(null, function third(error, response) {\r\nif (error) {\r\nconsole.log(error)\r\nreturn\r\n}\r\nconsole.log(response.body)\r\n})\r\n})\r\n})\r\n}\r\n\/\/ Execute \r\ncallbackHell()<\/code><\/pre>\n<\/div>\n
        In diesem Code muss f\u00fcr jede Funktion eine m\u00f6gliche Antwort und einen m\u00f6glichen Fehler ber\u00fccksichtigt werden, was die CallbackHell-Funktion optisch verwirrend macht.<\/p>\n
        Die Ausf\u00fchrung dieses Codes liefert folgendes Ergebnis:<\/p>\n
        \n
        Output\r\nFirst 9\r\nSecond 3\r\nError: Whoa! Something went wrong.\r\nat asynchronousRequest (<anonymous>:4:21)\r\nat second (<anonymous>:29:7)\r\nat <anonymous>:9:13<\/code><\/pre>\n<\/div>\n
        Ergebnis<\/h2>\n
        Diese Methode zur Verwaltung asynchronen Codes ist schwierig. Daher wurde in ES6 das Konzept der Promises eingef\u00fchrt. Dies ist der Schwerpunkt des n\u00e4chsten Abschnitts.<\/p>","protected":false},"excerpt":{"rendered":"Einleitung In den Anf\u00e4ngen des Internets bestanden Websites oft aus statischen Daten auf einer HTML-Seite\u2026","protected":false},"author":1,"featured_media":16684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[384],"class_list":{"0":"post-16678","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-java-script"},"yoast_head":"\n\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/understanding-the-event-loop-callbacks\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u062f\u0631 \u0631\u0648\u0632\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u060c \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627 \u0627\u063a\u0644\u0628 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 HTML \u062a\u0634\u06a9\u06cc\u0644…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/understanding-the-event-loop-callbacks\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-25T19:21:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2025\/01\/25224954\/Callbacks-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks\",\"datePublished\":\"2025-01-25T19:21:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/\"},\"wordCount\":83,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/25224954\\\/Callbacks-3.jpg\",\"keywords\":[\"Java Script\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/\",\"name\":\"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/25224954\\\/Callbacks-3.jpg\",\"datePublished\":\"2025-01-25T19:21:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/25224954\\\/Callbacks-3.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/25224954\\\/Callbacks-3.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/understanding-the-event-loop-callbacks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Den Ereignis-Loop und Callbacks verstehen \u2013 ITPiran-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/understanding-the-event-loop-callbacks\/","og_locale":"de_DE","og_type":"article","og_title":"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u062f\u0631 \u0631\u0648\u0632\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u060c \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627 \u0627\u063a\u0644\u0628 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 HTML \u062a\u0634\u06a9\u06cc\u0644…","og_url":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/understanding-the-event-loop-callbacks\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2025-01-25T19:21:24+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2025\/01\/25224954\/Callbacks-3.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks","datePublished":"2025-01-25T19:21:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/"},"wordCount":83,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/25224954\/Callbacks-3.jpg","keywords":["Java Script"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/","name":"Den Ereignis-Loop und Callbacks verstehen \u2013 ITPiran-Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/25224954\/Callbacks-3.jpg","datePublished":"2025-01-25T19:21:24+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2025\/01\/25224954\/Callbacks-3.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/25224954\/Callbacks-3.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/understanding-the-event-loop-callbacks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u062f\u0631\u06a9 \u062d\u0644\u0642\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 callbacks"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=16678"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16678\/revisions"}],"predecessor-version":[{"id":16685,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16678\/revisions\/16685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/16684"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=16678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=16678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=16678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}