Was ist JavaScript asynchron?

Als unerfahrene Programmierer stoßen wir oft auf einige sehr einfache Probleme, aber wir wissen nicht, was vor sich geht. Sie möchten beispielsweise Daten aus dem Hintergrund aufrufen und auf der Startseite anzeigen, aber das Ausgabeergebnis ist immer so leer. undefiniert, keine Daten verfügbar. Was ist der Grund dafür? Nachdem ich nach Informationen aus verschiedenen Quellen gesucht hatte, stellte ich fest, dass ich in die „Grube“ von JS Asynchronous geraten war. Richtig, in diesem Artikel teilen wir Ihnen hauptsächlich den asynchronen Betrieb von JS mit.

Wir hören oft die Konzepte Single-Threaded, Multi-Threaded, synchronisiert und asynchron. Was genau sind das also?
Dann beginnen wir mit den oben genannten Konzepten

Grundlegendes Verständnis von Single-Threaded, Multi-Threaded, synchronisiert und asynchron

Jedes laufende Programm (d. h. Prozess) Es gibt mindestens ein Thread, der als Hauptthread bezeichnet wird. Der Hauptthread wird beim Start des Programms erstellt und dient zur Ausführung der Hauptfunktion.

1. Ein einzelner Thread ist ein Thread mit nur einem Hauptthread. Der Code wird sequentiell von oben nach unten ausgeführt. Der Hauptthread ist für die Ausführung des gesamten Codes des Programms verantwortlich (Anzeige und Aktualisierung der Benutzeroberfläche, Netzwerkanforderungen). , lokaler Speicher usw.) [Ein Thread, bei dem ich mich ein wenig müde fühle, wenn ich nur an all die Dinge denke, die ich tun muss]

2. Multithreading ist, wie der Name schon sagt, ein Programm mit mehrere Threads, die vom Benutzer erstellt werden können. Mehrere von Benutzern unabhängig voneinander erstellte Prozesse sind relativ zum Hauptthread untergeordnete Threads. Der untergeordnete Thread und der Hauptthread sind unabhängige laufende Einheiten, und ihre jeweiligen Ausführungen beeinflussen sich nicht gegenseitig, sodass sie gleichzeitig ausgeführt werden können.

Fühlst du dich ein wenig schwindelig, wenn du dir nur diese trockenen Theorien anhörst? Zufälligerweise war mir auch schwindelig, als ich es zum ersten Mal sah.

Bei der Suche nach Informationen bin ich auf eine so anschauliche Metapher von anderen gestoßen.

Single-Threading bedeutet beispielsweise, dass Sie in die Küche gehen, um zu kochen und zu kochen, und eine Person läuft hin und her; Multi-Threading bedeutet, dass es zwei Personen gibt, eine allein kochend und die andere kochend.

Das sollte das Verständnis erleichtern, oder?

Und was ist synchron und asynchron?

Lassen Sie uns zur Veranschaulichung ein einfaches Beispiel aus dem Leben verwenden.

Sie rufen an, um ein Hotel zu buchen, und fragen das Personal, ob ein Zimmer verfügbar ist. Zu diesem Zeitpunkt muss das Personal prüfen, ob ein Zimmer verfügbar ist, bevor es Ihnen antworten kann.

Synchronisation bedeutet, nicht den Hörer aufzulegen und zu warten, bis das Personal Ihnen sagt, ob ein Zimmer frei ist.
Asynchron bedeutet, dass Sie den Hörer auflegen, andere Dinge wie Essen und Trinken erledigen und das Personal Sie anruft, nachdem es die Informationen gefunden hat.

Hier kommt also unser Thema

Was ist der asynchrone Betrieb von JS?

Die Ausführungsumgebung von JS ist Single-Threaded, das heißt, das Programm wird sequentiell ausgeführt und kann jeweils nur eine Aufgabe ausführen. Wenn das Programm weiter ausgeführt werden soll, muss es warten Es spielt keine Rolle, wie lange die Ausführung der aktuellen Aufgabe dauert (wenn das nachfolgende Programm schnell ausgeführt wird, wird es wirklich unangenehm sein, zu warten).

Um das unangenehme Blockierungsproblem nachfolgender Programme zu lösen. JavaScript verfügt über einen asynchronen Verarbeitungsmodus, bei dem es sich tatsächlich um eine verzögerte Verarbeitung handelt.

Lassen Sie uns zur Veranschaulichung ein Beispiel geben.

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

Das Abrufen von Daten aus dem Hintergrund kann viel Zeit in Anspruch nehmen. Daher muss renderUserInfo warten, bis die Daten abgerufen werden, bevor es ausgeführt werden kann. Glücklicherweise verfügt JS über asynchrone Vorgänge. Beim Abrufen von Daten müssen Sie nicht darauf warten, dass renderUserInfo die Daten abruft, sondern sie direkt ausführen.

In diesem Fall werden diese beiden Funktionen in welcher Reihenfolge ausgeführt? Keine Sorge, lassen Sie es uns debuggen:

var getUserInfo = function () {
      console.log('aaa');
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log('bbb');
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log('ccc');
    renderUserInfo(data);

Die Ausgabe der sequentiellen Ausführung sollte ursprünglich „aaa“, „bbb“, „ccc“ sein, oder?

Allerdings sind die Dinge nicht so einfach. Werfen wir einen Blick auf die Konsolenausgabe:

Die Ausgabeergebnisse sind nicht sequentiell.

Das heißt, wenn die Funktion zum Abrufen von Daten durch getJSON ausgeführt wird, wartet das Programm nicht darauf, dass es die Daten abruft, bevor es den nächsten Schritt ausführt, sondern überspringt stattdessen die Phase des Datenabrufs und führt die Ausgabedaten direkt aus. Daher sind auch die Daten leer.

Dies ist der asynchrone Mechanismus von JS.

Der obige Inhalt ist eine detaillierte Erklärung von asynchronem JavaScript. Ich hoffe, er kann jedem helfen.

Verwandte Empfehlungen:

JS-asynchrone Methode zur Implementierung des Generators

JS-asynchrone Lademethode

Detaillierte Erklärung des asynchronen js-Dateiladers

Das obige ist der detaillierte Inhalt vonWas ist JavaScript asynchron?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!