Asynchrone Pausen in JavaScript: Promises vs. Async/Await

JavaScript ist single-threaded und hat daher kein direktes Äquivalent zur sleep()-Funktion, die in anderen Sprachen vorhanden ist. Die Simulation einer Pause erfordert den Einsatz asynchroner Techniken. Dieser Artikel untersucht zwei Ansätze: einen mit setTimeout und Promises, und einen anderen, der die sauberere async/await-Syntax nutzt.

Inhaltsverzeichnis

• Implementierung einer Sleep-Funktion mit Promises
• Implementierung einer Sleep-Funktion mit Async/Await

Implementierung einer Sleep-Funktion mit Promises

Die einfachste Methode verwendet setTimeout innerhalb eines Promises. Dies verhindert das Blockieren des Hauptthreads und stellt sicher, dass Ihre Anwendung weiterhin reagiert.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

sleep(2000)
  .then(() => console.log("Für 2 Sekunden geschlafen!"))
  .catch(error => console.error("Ein Fehler ist aufgetreten:", error));

console.log("Dies wird ausgeführt, bevor die Sleep-Funktion abgeschlossen ist.");

Erläuterung:

• sleep(ms): Diese Funktion nimmt die Schlafdauer in Millisekunden (ms) als Argument entgegen.
• new Promise(resolve => setTimeout(resolve, ms)): Ein Promise wird erstellt. setTimeout plant die Ausführung der resolve-Funktion nach ms Millisekunden. Dies löst das Promise auf und signalisiert das Ende des Schlafs.
• .then(): Dies verarbeitet das aufgelöste Promise und führt den darin enthaltenen Code nach Abschluss des Schlafs aus.
• .catch(): Dieser optionale Abschnitt behandelt alle Fehler, die während des Timeouts auftreten können.

Diese Methode ist effizient und vermeidet die Nachteile des Blockierens des Hauptthreads. Die Verwendung von .then() mag jedoch für einige Programmierer weniger intuitiv erscheinen.

Implementierung einer Sleep-Funktion mit Async/Await

Async/Await bietet eine lesbarere und wohl elegantere Lösung. Es baut auf dem Promise-basierten Ansatz auf, vereinfacht aber den asynchronen Ablauf.

async function sleep(ms) {
  await new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunction() {
  console.log("Starte...");
  await sleep(2000);
  console.log("Für 2 Sekunden geschlafen!");
}

myFunction();
console.log("Dies wird ausgeführt, bevor die Sleep-Funktion abgeschlossen ist.");

Erläuterung:

• async function sleep(ms): Das async-Schlüsselwort kennzeichnet eine asynchrone Funktion.
• await new Promise(...): Das await-Schlüsselwort pausiert die Ausführung von sleep, bis das Promise aufgelöst wird. Diese Pause blockiert nicht den Hauptthread.
• async function myFunction(): Diese Funktion zeigt, wie sleep innerhalb einer größeren asynchronen Operation verwendet wird.

Die async/await-Syntax lässt asynchronen Code synchron erscheinen, wodurch die Lesbarkeit und Wartbarkeit verbessert wird. Dies ist im Allgemeinen der bevorzugte Ansatz aufgrund seiner Klarheit und Benutzerfreundlichkeit.

Beide Methoden erreichen das gleiche Ergebnis, aber async/await bietet eine modernere und lesbarere Syntax für die Behandlung asynchroner Operationen in JavaScript. Vermeiden Sie Busy-Waiting-Schleifen in Produktionscode; sie frieren Ihre Anwendung ein.