Implementieren einer Sleep-Funktion in JavaScript

1. Implementieren einer sleep() Funktion ohne Promise, async und await in JavaScript
2. Implementieren Sie die Funktion sleep() mit Promise, async und await in JavaScript

Jeder weiß, dass die JavaScript-Programmiersprache eine Single-Threaded-Sprache ist, was bedeutet, dass sie nur einen Aufrufstapel und einen Heap-Stapel hat. Aus diesem Grund kann JavaScript-Code nur zeilenweise ausgeführt werden. Es gibt jedoch Situationen, in denen einige Vorgänge ausgeführt werden sollen, deren Ausführung einige Zeit in Anspruch nimmt. In dieser Zeit ist es keine gute Idee, den Benutzer auf die Ergebnisse warten zu lassen.

Angenommen, wir führen einen API-Aufruf durch. In diesem Fall kann es einige Zeit dauern, bis die Antwort vom Server zurückkommt. Anstatt auf die Antwort zu warten, können wir das Schlüsselwort async vor der Funktion hinzufügen, die den API-Aufruf ausführt, der ein Promise-Objekt zurückgibt. Dadurch wird diese Funktion asynchron, und mit Hilfe von Warten warten wir einige Zeit. Während dieser Zeit werden wir versuchen, andere Aufgaben zu erledigen. Später können wir zurückkommen und die API-Aufrufergebnisse anzeigen, sobald wir die Antwort vom Server erhalten.

Damit können wir die JavaScript-Engine effektiv nutzen. Um dies zu erreichen, stellt uns JavaScript ein Promise-Objekt und einige Schlüsselwörter wie async und await zur Verfügung. Ein Promise ist ein Ereignis, das uns mitteilt, ob eine Anfrage gelöst oder abgelehnt wurde. Wann immer wir eine Ressource anfordern, gibt es zwei Dinge, entweder wird unsere Anfrage erfüllt oder sie kann abgelehnt werden. Mit async machen wir diese Funktion asynchron.

Implementieren einer sleep() Funktion ohne Promise, async und await in JavaScript

Lassen Sie uns zuerst sehen, was passiert, wenn wir in unserem Programm nicht promise, async und await verwenden. Der folgende Code hat die 3 Funktionen func_1, func_2 und sleep(). Die Ausführung beginnt mit der Funktion sleep(). Wenn die Ausführung beginnt, ruft die Funktion sleep() die Funktion func_1 auf. Beachten Sie jedoch, dass sich in der Funktion func_1 eine Funktion setTimeOut() befindet, die eine Zeitüberschreitung von 3000 ms (3 Sekunden) aufweist. Jetzt wartet die func_1 so lange. Bis dahin werden andere Codezeilen ausgeführt.

const func_1 = () => {
  setTimeout(() => {return 'one'}, 3000);
};

const func_2 = () => {
  return 'two'
};

const sleep = () => {
  let first_response = func_1();
  console.log(first_response);

  let second_response = func_2();
  console.log(second_response);
};

sleep();

Ausgabe:

undefined
two

Wenn console.log(first_response); ausgeführt wird, wird undefined gedruckt. Da die func_1() gerade auf den Status wartet und dann first_response keine enthält. Das ist der Grund, warum es undefined druckt. In JavaScript gibt es ein Hubkonzept, bei dem allen Variablen in einem Programm, die deklariert, aber nicht initialisiert sind, der Wert undefined zugewiesen wird. So erhalten wir als Ausgabe undefined.

Die zweite Funktion, func_2(), ist unkompliziert. Hier wird einfach die Zeichenkette zwei zurückgegeben, und dann wird sie in der Variablen second_response gespeichert und dann im Ausgabefenster gedruckt.

Implementieren Sie die Funktion sleep() mit Promise, async und await in JavaScript

Hier werden wir Promise, async und await verwenden und einige geringfügige Änderungen in unserem Programm vornehmen. Beachten Sie, wie wir den Wert undefined der Funktion func_1() erhalten. Beheben wir dies, indem wir die Funktion sleep() mit async asynchron machen und dann mit Hilfe von await einige Zeit warten oder schlafen und dann die Antwort als Promise-Objekt erhalten, das zurückgegeben wird von async.

const func_1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('The request is successful.');
    }, 3000);
  });
};

const func_2 = () => {
  return 'two'
};

const sleep = async () => {
  let first_response = await func_1();
  console.log(first_response);

  let second_response = func_2();
  console.log(second_response);
};

sleep();

Ausgabe:

The request is successful.
two

Nur das Hinzufügen des Schlüsselworts async vor der Funktion macht diese Funktion nicht asynchron. Wo immer Sie einen asynchronen Aufruf tätigen oder warten möchten, müssen wir für diese Funktion await verwenden, in diesem Fall vor func_1().

Das Schlüsselwort await wird vor einer Funktion geschrieben, mit der die Funktion einige Zeit warten und dann ausführen kann. Die Zeit bis zur Ausführung der Funktion hängt von der in der Funktion setTimeOut() angegebenen Zeit ab.

Innerhalb der Funktion func_1 geben wir ein Promise-Objekt zurück, das zwei Parameter akzeptiert, der erste ist die resolve und der zweite ist die reject. Wenn das Promise erfolgreich erfüllt wird, können wir die Methode resolve verwenden. Andernfalls können wir die Methode reject verwenden.

Wenn Sie dieses Programm ausführen, wird zuerst func_1() aufgerufen, und dann wartet das Programm 3 Sekunden, seit wir setTimeOut() von 3000 ms verwendet haben. Danach wird die Zeichenkette The request is successful. zurückgegeben. Als Ergebnis von func_1 wird es in der Variablen first_response gespeichert. Die Funktion func_2() wird aufgerufen und gibt als Ergebnis direkt zwei zurück, die dann in der Variablen second_response gespeichert werden. Auf diese Weise erreichen wir die Funktionalität sleep() in JavaScript.