JavaScript implementiert das Blockieren

Vorwort

JavaScript ist eine High-Level-Skriptsprache, die häufig in der Webentwicklung und Front-End-Entwicklung verwendet wird. In den meisten Fällen handelt es sich bei JavaScript um eine asynchrone Sprache, die dem Muster der ereignisgesteuerten Programmierung folgt, bei der Funktionen ausgeführt werden, wenn ein Ereignis ausgelöst wird. Dies macht JavaScript ideal für die Bearbeitung von Aufgaben im Zusammenhang mit UI-Benutzeroperationen, wie z. B. DOM-Manipulation und AJAX-Anfragen.

Manchmal müssen wir jedoch die Ausführung von JavaScript blockieren, um die Synchronisierung und sequentielle Ausführung des Codes sicherzustellen, insbesondere in einigen komplexen Szenarien, z. B. wenn wir sicherstellen müssen, dass eine andere Funktion warten muss, bevor die Ausführung einer bestimmten Funktion abgeschlossen ist das Ergebnis, das es zurückgibt. Zu diesem Zeitpunkt müssen wir einige Techniken verwenden, um die JavaScript-Blockierung zu implementieren.

In diesem Artikel werden einige Methoden zum Implementieren der JavaScript-Blockierung vorgestellt, hauptsächlich einschließlich:

1. Verwenden Sie setTimeout
2. Verwenden Sie Promise
3. Verwenden Sie async/await
4. Verwenden Sie Generator

Verwenden Sie setTimeout, um die JavaScript-Blockierung zu implementieren

Wenn nötig Bei der Implementierung von Blockierungen in JavaScript ist setTimeout eine sehr häufige Methode. setTimeout kann einen Timer erstellen, um eine bestimmte Aufgabe nach einem bestimmten Zeitraum auszuführen. Indem wir den Zeitparameter des Timers auf 0 setzen, können wir den JavaScript-Executor die Funktion in diesem Timer ausführen lassen, nachdem die aktuelle Aufgabe abgeschlossen ist. Auf diese Weise können wir eine JavaScript-Blockierung simulieren.

Der Beispielcode lautet wie folgt:

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

async function demo() {
  console.log('Start');
  await sleep(5000); // sleep for 5 seconds
  console.log('End');
}

demo();

In diesem Beispielcode definieren wir eine Funktion namens „sleep“, die die setTimeout-Methode aufruft und ein Promise-Objekt zurückgibt. Wenn wir die Sleep-Methode in der Demo-Funktion aufrufen, wartet der JavaScript-Executor 5 Sekunden, bevor er den folgenden Code ausführt.

Verwenden Sie Promise, um Blockierungen in JavaScript zu implementieren.

Promise ist ein sehr wichtiges asynchrones Programmiermuster in JavaScript. Durch die Verwendung von Promises können wir asynchrone Vorgänge in synchrone Muster umwandeln, wodurch es einfacher wird, den Code synchronisiert und lesbar zu halten.

Der Beispielcode lautet wie folgt:

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

function demo() {
  console.log('Start');
  sleep(5000).then(() => {
    console.log('End');
  });
}

demo();

In diesem Beispielcode verwenden wir immer noch die Sleep-Funktion, um Blockierungsvorgänge zu simulieren, aber dieses Mal verwenden wir ein Promise-Objekt. Wenn wir die Sleep-Methode in der Demo-Funktion aufrufen, gibt sie ein Promise-Objekt zurück. Wir können eine Callback-Funktion registrieren, indem wir die Then-Methode aufrufen und diese Callback-Funktion ausführen, wenn das Promise abgeschlossen ist. Anstelle der Schlüsselwörter „async“ und „await“ sorgen diesmal Promise-Objekte dafür, dass der Code synchronisiert und lesbar bleibt.

Verwenden Sie async/await, um Blockierungsvorgänge in JavaScript zu implementieren.

ES6 hat die Schlüsselwörter async/await eingeführt. Mit diesen Schlüsselwörtern können wir Promise-Objekte einfacher verarbeiten, um Blockierungsvorgänge in JavaScript zu implementieren.

Der Beispielcode lautet wie folgt:

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

async function demo() {
  console.log('Start');
  await sleep(5000);
  console.log('End');
}

demo();

In diesem Beispielcode verwenden wir die Schlüsselwörter „async“ und „await“ und fügen die Schlaffunktion in einen asynchronen Funktionskörper ein. Wenn wir die Sleep-Methode innerhalb der Demo-Funktion aufrufen, wartet sie automatisch auf die Fertigstellung des Promise-Objekts. Dieser Ansatz ermöglicht es uns, den Unterschied zwischen Blockierung und Nichtblockierung im Code zu verdeutlichen und den Code prägnant und lesbar zu halten.

Verwenden Sie Generator, um die JavaScript-Blockierung zu implementieren

Generator ist eine spezielle JavaScript-Funktion, die unterbrochen und fortgesetzt werden kann. Generatoren können asynchrone Aufgaben durchlaufen und mit anderen Kontrollflüssen gemischt werden, um Blockierungsvorgänge in JavaScript zu implementieren.

Der Beispielcode lautet wie folgt:

function* demo() {
  console.log('Start');
  yield sleep(5000);
  console.log('End');
}

function sleep(ms) {
  setTimeout(() => {
    it.next();
  }, ms);
}

const it = demo();
it.next();

In diesem Beispielcode verwenden wir die Generatorfunktion und fügen darin die Schlaffunktion ein. Wenn wir das Schlüsselwort yield innerhalb der Demo-Funktion aufrufen, wird der aktuelle Ausführungsstatus angehalten und auf den Abschluss der Ausführung der Sleep-Funktion gewartet. Wenn die Sleep-Funktion abgeschlossen ist, kehrt der JavaScript-Executor zur Demo-Funktion zurück und fährt mit der Ausführung des nachfolgenden Codes fort.

Fazit

JavaScript ist eine sehr leistungsfähige und flexible Programmiersprache und aufgrund ihrer asynchronen Natur auch eine sehr gute Skriptsprache. In einigen Fällen müssen wir jedoch einige seiner asynchronen Funktionen opfern, um sequentiellere und synchronere Vorgänge zu erreichen. Durch die verschiedenen in diesem Artikel vorgestellten Methoden können wir den Ausführungsprozess von JavaScript besser steuern und robusteren und effizienteren Code schreiben.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert das Blockieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!