Verwendung der JavaScript-Sleep-Funktion

1. Schlaffunktion

JavaScript wird in einem einzigen Thread ausgeführt und verfügt nicht über eine integrierte Sleep-Funktion. Nun simulieren wir den Effekt einer Verzögerung der Ausführung durch Verwendung von Sleep.

Verwenden Sie die Schlaffunktion, um den Ampelcode umzusetzen: rotes Licht für 2 Sekunden, gelbes Licht für 1 Sekunde, grünes Licht für 3 Sekunden und Farbwechsel in einem Zyklus.

2. setTimeout

Die Methode, bei der „setTimeout“ direkt zur Implementierung von sleep() verwendet wird, weist die beste Kompatibilität auf, die Implementierungsmethode mit Rückruffunktionen macht den Code jedoch weniger lesbar und wartbar.

// Zeitlimit festlegen
let fun = () => console.log('Zeitüberschreitung');
lass schlafen = Funktion(Spaß,Zeit){
  setzeTimeout(()=>{
    Spaß();
  },Zeit);
}

Schlaf (Spaß, 2000);

setTimeout
setTimeout ist die einfachste Implementierungsmethode. Der Code sieht wie folgt aus und verwendet Rekursion, um einen zyklischen Farbwechsel zu implementieren:
Funktion changeColor(Farbe) {
 console.log('Ampel ', Farbe);
}
Funktion main() {
 Farbe ändern('rot');
 setzeTimeout(()=>{
  Farbe ändern('gelb');
  setzeTimeout(() => {
   Farbe ändern('grün');
   setTimeout(main, 2000);
  }, 1000);
 }, 2000);
}
hauptsächlich();

3. Versprechen

In der ES6-Syntax ist Promise eine Möglichkeit, die Sleep-Methode asynchron zu implementieren. Mithilfe der Promise-Methode kann die Sleep-Implementierungsmethode elegant erstellt werden, ohne dass Funktionsrückrufe verwendet werden müssen.

// versprechen
let fun = () => console.log('Zeitüberschreitung');
let sleep2 = (Zeit) => neues Promise((Auflösung) => {
  setTimeout(Auflösung, Zeit)
})
sleep2(2000).dann(Spaß);

Versprechen

Verwenden Sie Promise, um die nächste Farbänderung hineinzuschreiben, und verwenden Sie abschließend Rekursion, um die Schleife abzuschließen.

Verwenden Sie Promise anstelle von setTimeout und verwenden Sie Kettenaufrufe, um die Light-Konvertierung zu realisieren. Geben Sie dann ein Promise-Objekt zurück. Wenn sich dieses Objekt im aufgelösten Zustand befindet, kann es kontinuierlich aufgerufen werden.

const Ampel=(Farbe,Dauer)=>{
  returniere neues Promise((lösen,ablehnen)=>{
    console.log('Ampel ', Farbe);
    setzeTimeout(()=>{
        lösen()
    },Dauer)
  })
}
const main=()=>{
    Versprechen.lösen()
    .dann(()=>{
        returniere Ampel('rot',3000)
    })
    .dann(()=>{
        returniere Ampel('gelb',1000)
    })
    .dann(()=>{
        returniere Ampel('grün',2000)
    })
    .dann(()=>{
        hauptsächlich();
    })
}
hauptsächlich()

4. asynchrones Warten

Async await ist eigentlich die syntaktische Vereinfachung von Generator und Promise. Es bietet eine synchrone Programmiermethode zur Implementierung asynchroner Aufrufe und unterstützt gleichzeitig die Semantik der Sleep-Funktion. Es ist auch eine häufig verwendete Methode zur Implementierung von Sleep.

// asynchron warten
asynchrone Funktion warte(Zeit){
  warte auf sleep2(Zeit);
  Spaß();
}

warte(3000);

asynchrone Verwendung von „Await“

Durch die Verwendung von async await können Sie die .then.then.then-Reihe von Promise vermeiden, und es besteht keine Notwendigkeit für Rekursion. Sie können while(true) verwenden, um die Schleife zu implementieren.

Funktion sleep(Dauer) {
  gib ein neues Versprechen zurück (Auflösen => {
      setTimeout(Auflösung, Dauer);
  })
}
asynchrone Funktion changeColor(Farbe, Dauer) {
 console.log('Ampel ', Farbe);
 warte auf Schlaf (Dauer);
}
asynchrone Funktion main() {
 während (wahr) {
  warte auf Farbänderung('rot', 2000);
  warte auf Farbänderung('gelb', 1000);
  warte auf Farbänderung('grün', 3000);
 }
}
hauptsächlich();

5. Ausgabe 1 nach 1 s, Ausgabe 2 nach 2 s, Ausgabe 3 nach 3 s

const log = konsole.log;
const sleep = (Zeitüberschreitung) => {
  returniere neues Promise((resolve)=>{
    setzeTimeout(()=>{
      lösen();
    }, Zeitüberschreitung)
  })
}

const main = async()=>{
  warte auf Schlaf (1000);
  Protokoll(1);
  warte auf Schlaf (2000);
  Protokoll(2);
  warte auf Schlaf (3000);
  Protokoll(3);
}

Referenzartikel:

Ampel Ampel

Dies ist das Ende dieses Artikels über die Verwendung der JavaScript-Schlaffunktion. Weitere relevante Inhalte zur JavaScript-Schlaffunktion finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!