Heim > Artikel > Web-Frontend > Was ist asynchrones Javascript? Was ist der Nutzen?

Was ist asynchrones Javascript? Was ist der Nutzen?

不言nach vorne: 2019-01-10 09:39:504819Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, was asynchrones Javascript ist. Was ist der Nutzen? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was ist js asynchron?

Wir wissen, dass JavaScript Single-Threaded ist, was mit seinem Zweck zusammenhängt. Als Browser-Skriptsprache besteht der Hauptzweck von JavaScript darin, mit Benutzern zu interagieren und das DOM zu manipulieren. Dies legt fest, dass es nur Single-Threaded sein kann, da es sonst zu sehr komplexen Synchronisationsproblemen kommt. Angenommen, JavaScript verfügt über zwei Threads gleichzeitig. Ein Thread fügt Inhalt zu einem bestimmten DOM-Knoten hinzu und der andere Thread löscht den Knoten. Welchen Thread sollte der Browser in diesem Fall verwenden?
Der sogenannte „Single Thread“ bedeutet, dass immer nur eine Aufgabe gleichzeitig erledigt werden kann. Wenn mehrere Aufgaben vorhanden sind, müssen diese in die Warteschlange gestellt werden. Nachdem die vorherige Aufgabe abgeschlossen ist, wird die nächste Aufgabe ausgeführt und so weiter.
Der Vorteil dieses Modus besteht darin, dass er relativ einfach zu implementieren ist und die Ausführungsumgebung relativ einfach ist. Der Nachteil besteht darin, dass, solange eine Aufgabe lange dauert, nachfolgende Aufgaben in die Warteschlange gestellt werden müssen, was die Ausführung verzögert des gesamten Programms. Das häufige Nicht-Reagieren des Browsers (Suspended Death) wird oft dadurch verursacht, dass ein bestimmter Teil des Javascript-Codes über einen längeren Zeitraum ausgeführt wird (z. B. eine Endlosschleife), was dazu führt, dass die gesamte Seite an dieser Stelle hängen bleibt und andere Aufgaben nicht ausgeführt werden können.
Die synchrone Anfrage von Ajax führt zum Einfrieren des Browsers, da dadurch die Benutzeroberfläche des Browsers (Schaltflächen, Menüs, Bildlaufleisten usw.) gesperrt wird und alle Benutzerinteraktionen blockiert werden. Ajax in jquery verfügt über eine solche synchrone Anfrage. Die Funktion muss mit Vorsicht verwendet werden Vermeiden Sie die Verwendung synchroner Anforderungen, insbesondere wenn die angeforderte Datenmenge groß ist.
Nennen Sie einige Beispiele, um sich asynchron zu fühlen
Die Hintergrundschnittstelle verwendet Easy-Mock, die offizielle Adresse: https://easy-mock.com/
Ajax verwendet Axios, der Grundcode lautet wie folgt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>javascript异步</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <button>点击</button>
  <script>
    {
      let myData = null
      //ajax请求
      function ajax() {
        axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
          .then(data => {
            console.log("ajax返回成功");// handle success
            myData = data.data
            console.log(myData);

          })
          .catch(error => {
            // console.log(error); // handle error
            console.log("ajax返回失败");
          })
      }
    }
  </script>
</body>
</html>

Sehen wir uns den Effekt an, indem wir einige js hinzufügen,

Asynchronous-Timer

      console.log(myData);
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);

Ausgabe, es sollte keine Spannung entstehen

//null
//null
//定时器

Ausführungsreihenfolge:
Führen Sie das erste aus, zuerst console.log(myData);
Dann wird der Timer angetroffen und der Timer wird angehalten (das heißt, der Timer wird angehalten)
Fahren Sie mit der Ausführung des zweiten console.log(myData);Es gibt keinen Ausführungs-JS-Code. Gehen Sie zurück und führen Sie die angehaltene Aufgabe weiter aus Keine Spannung

      console.log(myData);
      ajax()
      console.log(myData);

Die Ausführungssequenz ähnelt im Wesentlichen dem Timer oben, daher werde ich hier nicht auf Details eingehen. Fügen Sie die beiden Kastanien zusammen und schauen wir uns die Ausgabe von

//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注)

an. Hat

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);

das Problem gefunden? Wenn zwei asynchrone Funktionen aufeinandertreffen, welche wird zuerst ausgeführt? Wer schneller rennt, wird zuerst hingerichtet?

Man kann sagen, dass dies tatsächlich zu einem weiteren Wissenspunkt führt:

Aufgabenwarteschlange und Ereignisschleife

Beide console.log(myData); werden synchron ausgeführt Beide werden im Hauptthread von js ausgeführt.

Es gibt eine Aufgabenwarteschlange außerhalb des Hauptthreads, und die Aufgabenwarteschlange speichert Inhalte, die asynchron ausgeführt werden müssen.
Wenn die Ausführung des Hauptthreads beendet ist, werden die Aufgaben in der Aufgabenwarteschlange angezeigt wird ausgeführt. (Scannen kontinuierlich wiederholen) bis die Aufgabenwarteschlange gelöscht ist

Beobachten Sie diesen Code

//null
//null
//ajax返回成功
//{success: true, data: {…}}
//定时器

Ausgabe: 1, 3, 2, es gibt nichts zu erklären
Sehen Sie sich einen anderen an Stück Code

      console.log(1);
      setTimeout(function () {
        console.log(2);
      }, 1000);
      console.log(3);

Ausgabe: 2, 1, warum ist das so?

console.log(2); wird zuerst im Hauptthread ausgeführt,

setTimeout(function(){console.log(1);}, 0); wird nur in die Aufgabenwarteschlange gestellt Der Inhalt der Aufgabenwarteschlange wird erst ausgeführt, wenn der Hauptthread die Ausführung abgeschlossen hat.

Warum müssen wir den Inhalt der Aufgabenwarteschlange kontinuierlich scannen, nachdem die Aufgabe des Hauptthreads abgeschlossen ist?

Ein Blick auf diesen Code wird Ihnen helfen zu verstehen

setTimeout(function(){console.log(1);}, 0);
console.log(2);

Wir haben der Schaltfläche ein Klickereignis hinzugefügt und beim Aktualisieren des Browsers weiter auf die Schaltfläche geklickt (natürlich manuell klicken).
Sehen Sie am Ausgang:

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);
      const btn = document.querySelector('button')
      btn.onclick = () => {
        console.log("点击了");
      }

Ist dadurch verständlich, warum der Hauptthread die Task-Warteschlange in einer Schleife scannen muss?

Jede Runde der Ereignisschleife wird als Tick bezeichnet (denken Sie an nextTick in Vue?)

Wenn Benutzerinteraktion auftritt (Mausklickereignis, Seitenlaufereignis, Fenstergrößenänderungsereignis usw.), Ajax, Timer, Timer usw. fügen Ereignisse zur Aufgabenwarteschlange in der Ereignisschleife hinzu und warten dann auf die Ausführung

Welche Szenarien gibt es für Front-End-Asynchronität?

Geplante Aufgaben: setTimeout, setInverval

Netzwerkanfragen: Ajax-Anfragen, dynamisches Laden von IMG-Bildern

Ereignisbindung oder DOM-Ereignis, z. B. ein Klickereignis. Ich weiß nicht, wann es klickt, aber was soll ich tun, bevor es klickt? Wenn ein Ereignistyp mit addEventListener registriert wird, verfügt der Browser über ein separates Modul zum Empfangen dieses Ereignisses. Wenn das Ereignis ausgelöst wird, wirft ein bestimmtes Modul des Browsers die entsprechende Funktion in die asynchrone Warteschlange leer, die Funktion wird direkt ausgeführt.
Versprechen in ES6
Wann ist Asynchronität erforderlich:
Wann eine Wartezeit auftreten kann. Situation

Wenn das Programm während des Wartevorgangs nicht wie eine Warnung blockiert werden kann

Daher müssen alle „Wartesituationen“ asynchron sein
In einem Satz müssen Sie asynchron verwenden, wenn Sie warten müssen, aber das Programm nicht blockieren können

Asynchron und parallel

Asynchron und parallel nicht verwechseln,
Asynchron ist Single-Threaded, Parallel ist Multi-Threaded
Asynchron: Die Aufgaben des Hauptthreads werden erst nach dem synchronisiert Wenn die Ausführung abgeschlossen ist, werden die asynchronen Aufgaben in der Aufgabenwarteschlange nacheinander ausgeführt.
Parallel: Zwei oder mehr Ereignisketten werden im Laufe der Zeit abwechselnd ausgeführt, sodass sie von einer höheren Ebene aus scheinbar gleichzeitig ausgeführt werden (obwohl sie nur verarbeitet werden jeweils ein Ereignis)

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Einführung in die Verwendung von Wertübertragung und Ereignisbus (Eventbus) in Vue-Nicht-Eltern-Kind-KomponentenNächster Artikel：Einführung in die Verwendung von Wertübertragung und Ereignisbus (Eventbus) in Vue-Nicht-Eltern-Kind-Komponenten

In Verbindung stehende Artikel

Mehr sehen