> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Asynchronous JavaScript

## Synchron vs. Asynchron

<AccordionGroup>
  <Accordion title="Synchroner Code">
    * Grossteil des Codes ist synchron
    * Synchroner Code wird Zeile für Zeile ausgeführt
    * Jede Codezeile wartet, bis die vorherige Zeile beendet ist

    **Problem:** Langlaufende Operationen blockieren die Ausführung!

    ```javascript theme={null}
    const p = document.querySelector('p');
    p.textContent = 'My name is Levin!';
    alert('Text was edited!');
    p.style.color = 'red';
    ```

    Hier blockiert der `alert` die Codeausführung und die Seite funktioniert nicht, bis der User mit dem Alert interagiert.
  </Accordion>

  <Accordion title="Asynchroner Code">
    * Asynchroner Code wird ausgeführt, nachdem ein Task, die im "Hintergrund" läuft, beendet ist
    * Asynchroner Code ist nicht-blockierend
    * Die Ausführung wartet nicht darauf, dass ein asynchroner Task seine Arbeit beendet

    ```javascript theme={null}
    const p = document.querySelector('p');
    setTimeout(() => {
      p.textcontent = 'My name is Levin!';
    }, 5000);
    p.style.color = 'red';
    ```

    Der Time läuft asynchron ab, das heisst die Textfarbe wird rot obwohl der Timer eigentlich die Ausführung stoppt. Der Timer wird jedoch im Hintergrund ausgeführt, dann nach 5 Sekunden wird die Callback-Funktion darin aufgerufen.
  </Accordion>
</AccordionGroup>