Warten für X Sekunden in JavaScript

1. Verwenden Sie setTimeout(), um für X Sekunden in JavaScript zu warten
2. Verwenden Sie promises und async/await, um in JavaScript auf X Sekunden zu warten
3. Verwendung der for-Schleife zur Implementierung einer synchronen delay-Funktion in JavaScript

Dieses Tutorial wird erklären, wie wir für x Sekunden warten können, bevor die Ausführung in JavaScript fortzusetzen. Wir werden eine delay(seconds) Funktion implementieren, die den Thread für x Sekunden blockieren wird. Wir werden auch mehrere Implementierungstechniken für diese Verzögerung erklären.

Wenn wir über die Implementierung einer delay-Funktion sprechen, ist die am häufigsten verwendete Methode das asynchrone setTimeout().

Verwenden Sie setTimeout(), um für X Sekunden in JavaScript zu warten

Die asynchrone Methode setTimeout() ist eine der Funktionen höherer Ordnung, die eine Callback-Funktion als Argument nimmt und diese Funktion nach Ablauf der eingegebenen Zeit ausführt. Die im Parameter angegebene Zeit ist in der Einheit ms.

console.log('I am the first log');

setTimeout(function() {
  console.log('I am the third log after 5 seconds');
}, 5000);

console.log('I am the second log');

Ausgabe:

I am the first log
I am the second log
I am the third log after 5 seconds

Verwenden Sie promises und async/await, um in JavaScript auf X Sekunden zu warten

Eine Methode, die Verzögerungsfunktion im asynchronen Kontext zu implementieren, besteht darin, das async/await-Konzept und das promises-Konzept zu kombinieren. Wir können eine Verzögerungsfunktion erstellen, die ein neues promise zurückgibt, in dem wir die Methode setTimeout() mit unserer gewünschten Wartezeit aufrufen. Danach können wir diese delay-Funktion in jedem beliebigen asynchronen Kontext aufrufen.

function delay(n) {
  return new Promise(function(resolve) {
    setTimeout(resolve, n * 1000);
  });
}

async function myAsyncFunction() {
  // Do what you want here
  console.log('Before the delay')

      await delay(5);

  console.log('After the delay')
  // Do what you want here too
}

myAsyncFunction();

Ausgabe:

Before the delay
After the delay

Die Verzögerungsfunktion kann auch mit der Pfeil-Syntax in ECMAScript 6 optimiert werden, wie das folgende Beispiel zeigt:

const delay = (n) => new Promise(r => setTimeout(r, n * 1000));

Verwendung der for-Schleife zur Implementierung einer synchronen delay-Funktion in JavaScript

Angenommen, wir haben keinen asynchronen Kontext, um die obige delay()-Funktion zu verwenden oder wollen die setTimeout()-Funktion nicht verwenden. In diesem Fall können wir eine synchrone Verzögerungsfunktion mit einer normalen for-Schleife und der Klasse Date() zur Berechnung der Zeit implementieren.

Die Implementierung dieser Funktion ist ziemlich einfach. Es geht darum, die CPU für die gewünschte Zeitspanne zu beschäftigen. Dies geschieht, indem die verstrichene Zeit berechnet und mit der Wartezeit verglichen wird, so dass wir die Ausführung danach fortsetzen können.

function syncDelay(milliseconds) {
  var start = new Date().getTime();
  var end = 0;
  while ((end - start) < milliseconds) {
    end = new Date().getTime();
  }
}

console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')

Ausgabe:

Before the delay
After the delay