𝗩𝗲𝗿𝘀𝘁𝗲𝗵𝗲𝗻 𝘃𝗼𝗻 𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗲𝗺 𝘂𝗻𝗱 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗲𝗺 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

JavaScript führt eine Aufgabe nach der anderen aus. Das liegt daran, dass es eine Single-Threaded-Sprache ist.

Um schnelle Apps zu entwickeln, müssen Sie den Unterschied zwischen synchronem und asynchronem Code kennen.

Synchrone Ausführung

Der Code wird Zeile für Zeile ausgeführt. Jede Aufgabe wartet darauf, dass die vorherige abgeschlossen ist.

Stellen Sie sich eine Schlange am Geldautomaten vor. Person zwei kann das Gerät erst benutzen, wenn Person eins fertig ist.

Wenn eine Aufgabe lange dauert, stoppt das gesamte Programm. Dies wird als „Blocking“ bezeichnet.

Asynchrone Ausführung

Aufgaben laufen unabhängig voneinander ab. JavaScript startet eine Aufgabe und geht sofort zur nächsten über.

Stellen Sie sich ein Restaurant vor. Sie bestellen Essen und unterhalten sich dann mit Freunden, während Sie warten. Sie sitzen nicht einfach nur still und warten darauf, dass das Essen kommt, bevor Sie etwas anderes tun.

Asynchroner Code verhindert, dass Ihre Anwendung während folgender Vorgänge einfriert:

  • API-Anfragen
  • Datenbankabfragen
  • Dateilesen
  • Bild-Uploads

Drei Möglichkeiten, asynchronen Code zu handhaben:

  1. Callbacks Eine Funktion wird ausgeführt, nachdem eine bestimmte Aufgabe abgeschlossen ist. Es ist wie ein Lieferfahrer, der Sie anruft, wenn Ihr Essen ankommt.

  2. Promises Ein Promise repräsentiert ein zukünftiges Ergebnis. Es verbleibt in einem „pending“-Zustand (ausstehend), bis es entweder aufgelöst (resolved/Erfolg) oder abgelehnt (rejected/Fehler) wird.

  3. Async/Await Dies lässt asynchronen Code wie synchronen Code aussehen. Er ist leicht zu lesen. Sie verwenden await, um eine Funktion anzuhalten, ohne den Rest Ihres Programms zu blockieren.

So funktioniert es im Hintergrund:

JavaScript verwendet eine Event Loop, um diese Aufgaben zu verwalten.

  • Call Stack: Verfolgt Ihre aktuellen Funktionen.
  • Web APIs: Übernimmt zeitintensive Aufgaben wie Timer oder Fetches.
  • Callback Queue: Hält abgeschlossene Aufgaben bereit.
  • Event Loop: Verschiebt Aufgaben aus der Queue in den Stack, wenn der Stack leer ist.

Vergleich:

Synchron:

  • Läuft sequenziell ab
  • Blockiert das Programm
  • Einfach zu schreiben
  • Langsam bei rechenintensiven Aufgaben

Asynchron:

  • Läuft unabhängig ab
  • Nicht blockierend
  • Komplexer
  • Effizient für Web-Apps

Das Beherrschen dieser Konzepte ist der Schlüssel zur Nutzung von React, Node.js und modernen APIs.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea