Erfahren Sie Schritt für Schritt, wie Sie die asynchrone Programmierung in JavaScript verstehen

Dieser Artikel führt Sie in die asynchrone Programmierung in JavaScript ein. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Asynchron bedeutet asynchron ...

Dieser Abschnitt mag etwas langweilig sein, aber es ist ein sehr wichtiges Konzept in JavaScript und es ist unbedingt erforderlich, es zu lernen.

Zweck

• Entwicklungseffizienz verbessern und einfach zu wartenden Code schreiben

Einführung in die Frage

• Warum bleibt die Seite beim Anfordern hängen? ?

$.ajax({
  url: "www.xx.com/api",
  async: false, // true
  success: function(result) {
    console.log(result);
  },
});

• Warum werden die Daten aktualisiert, aber nicht das DOM? ?

// 异步批量更新DOM（vue-nextTick）
// <p id="app">{{num}}</p>
new Vue({
  el: "#app",
  data: {
    num: 0,
  },
  mounted() {
    let dom = document.getElementById("app");
    while (this.num !== 100) {
      this.num++;
    }
    console.log("Vue num=" + this.num, "DOM num=" + dom.innerHTML);
    // Vue num=100,DOM num=0
    // nextTick or setTimeout
  },
});

Grund für die asynchrone Generierung

Grund: Single-Thread (zu einem bestimmten Zeitpunkt wird nur eine Sache ausgeführt), verursacht durch Single-Threading der JS-Engine des Browsers.

Einzelner Thread bedeutet, dass es nur einen Thread in der JS-Engine gibt, der für die Interpretation und Ausführung des IavaScript-Codes verantwortlich ist. Man könnte ihn genauso gut als Hauptthread bezeichnen.

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. Die vorherige Aufgabe wird abgeschlossen, bevor die nächste Aufgabe ausgeführt wird.

Schauen Sie sich zunächst das Thread-Diagramm des Browserkernels an:

Unter diesen schließen sich der Rendering-Thread und der JS-Thread gegenseitig aus.

Angenommen, es gibt zwei Funktionen, eine zum Ändern und eine zum Löschen, die gleichzeitig einen DOM-Knoten betreiben. Wenn mehrere Threads gleichzeitig ausgeführt werden, kommt es definitiv zu einem Deadlock Probleme.

Der Grund, warum JS für Single-Threading konzipiert ist, liegt an der speziellen Umgebung des Browsers.

Vor- und Nachteile von Einzelthreads:

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 nachfolgende Aufgaben ausgeführt werden müssen, solange eine Aufgabe lange dauert in die Warteschlange gestellt werden, was die gesamte Ausführung des Programms verzögert. 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.

Gemeinsame Blockade (Endlosschleife):

while (true) {}

JS wurde ursprünglich als Skriptsprache entwickelt, die im Browser ausgeführt wird. Deshalb wollten wir es nicht so kompliziert machen, also haben wir es so konzipiert, dass es Single-Threaded ist. das heißt, one Zu diesem Zeitpunkt können Sie nur eine Sache tun.

Um die Single-Thread-Blockierung zu lösendieses Manko: Asynchronität wird erzeugt.

Nehmen Sie das Essen von Instantnudeln als Beispiel:

• Synchron: Instantnudeln kaufen => Wasser kochen (starren) => Nudeln kochen => Instantnudeln essen
• Asynchron: Instantnudeln kaufen => Wasser kochen (das Wasser darin kochen). der Wasserkocher klingelt - Rückruf) = "Fernsehen =" Nudeln kochen (die Nudeln sind fertig und der Wasserkocher klingelt - Rückruf) = "Fernsehen =" Rufen Sie mich an, wenn es fertig ist = "Instantnudeln essen

Fernsehen ist ein Bei asynchronem Betrieb klingelt der Wasserkocher. Dies ist die Rückruffunktion.

Asynchrone Programmierung

Der größte Teil des Codes in JS wird synchron ausgeführt, und nur wenige Funktionen werden asynchron ausgeführt. Asynchron ausgeführter Code erfordert asynchrone Programmierung.

Asynchroner Code

setTimeout(() => {
  console.log("log2");
}, 0);
console.log("log1");
// ?? log1 log2

Eigenschaften von asynchronem Code: Es wird nicht sofort ausgeführt, sondern muss warten und zu einem bestimmten Zeitpunkt in der Zukunft ausgeführt werden.

Synchroner Code	Asynchroner Code
<script></script> Code <script></script>代码	网络请求（Ajax）
I/O 操作	定时器（setTimeout、setInterval）
渲染操作	Promise（then）
	async/await

回调函数

异步代码最常见的写法就是使用回调函数。

• HTTP 网络请求（请求成功、识别后执行 xx 操作）
• DOM 事件绑定机制（用户触发事件后执行 xx 操作）
• 定时器（setTimeout、setInterval）（在达到设定时间后执行 xx 操作）

// 注意到click方法中是一个函数而不是一个变量
// 它就是回调函数
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});
// 或者
function click() {
  // 它就是回调函数
  alert("Btn 1 Clicked");
}
$("#btn_1").click(click);

回调函数的缺点也很明显，容易产生回调地狱：

异步编程的三种方式

• callback

function getOneNews() {
  $.ajax({
    url: topicsUrl,
    success: function(res) {
      let id = res.data[0].id;
      $.ajax({
        url: topicOneUrl + id,
        success: function(ress) {
          console.log(ress);
          render(ress.data);
        },
      });
    },
  });
}

• promise

function getOneNews() {
  axios
    .get(topicsUrl)
    .then(function(response) {
      let id = response.data.data[0].id;
      return axios.get(topicOneUrl + id);
    })
    .then((res) => {
      render(res.data.data);
    })
    .catch(function(error) {
      console.log(error);
    });
}

• async/await

async function getOneNews() {
  let listData = await axios.get(topicsUrl);
  let id = listData.data.data[0].id;
  let data = await axios.get(topicOneUrl + id);
  render(data.data.data);
}

在线预览

预览地址：http://jsrun.net/s43Kp/embedded/all/light

问题？？

如果多个异步代码同时存在，那么执行顺序应该是怎样的？那个先执行、那个后执行了？

宏任务和微任务

异步代码的划分，异步代码分宏任务和微任务。

Netzwerkanforderung (Ajax) I/O-OperationenTimer (setTimeout, setInterval)Rendering-Vorgang

宏任务（不着急）	微任务(着急)
<script></script>

Promise(then)🎜🎜🎜🎜🎜🎜🎜async/await🎜🎜🎜🎜🎜🎜Callback.-Funktion🎜🎜🎜 Die gebräuchlichste Methode zum Schreiben von asynchronem Code ist Verwenden Sie die Rückruffunktion. 🎜🎜🎜HTTP-Netzwerkanforderung (xx-Vorgang ausführen, nachdem die Anforderung erfolgreich und erkannt wurde) 🎜🎜DOM-Ereignisbindungsmechanismus (xx-Vorgang ausführen, nachdem der Benutzer das Ereignis ausgelöst hat) 🎜🎜Timer (setTimeout, setInterval) (xx nach der festgelegten Zeit ausführen erreicht ist) Operation) 🎜🎜

console.log("script start");
setTimeout(function() {
  console.log("timeout1");
}, 10);
new Promise((resolve) => {
  console.log("promise1");
  resolve();
  setTimeout(() => console.log("timeout2"), 10);
}).then(function() {
  console.log("then1");
});
console.log("script end");

🎜Die Mängel der Rückruffunktion sind ebenfalls offensichtlich und es ist leicht, eine Rückrufhölle zu erzeugen: 🎜🎜🎜🎜🎜🎜Drei Möglichkeiten der asynchronen Programmierung🎜🎜🎜🎜Rückruf🎜🎜rrreee🎜 🎜Versprechen🎜🎜rrreee🎜🎜 async/await🎜 🎜rrreee🎜🎜 Online-Vorschau🎜🎜🎜Vorschauadresse: http://jsrun.net/s43Kp/embedded/all/light🎜🎜🎜Fragen? ? 🎜🎜🎜Wenn mehrere asynchrone Codes gleichzeitig vorhanden sind, wie sollte die Ausführungsreihenfolge sein? Welches wird zuerst und welches später ausgeführt? 🎜🎜🎜Makroaufgaben und Mikroaufgaben🎜🎜🎜Aufteilung des asynchronen Codes, asynchroner Code ist in Makroaufgaben und Mikroaufgaben unterteilt. 🎜🎜🎜🎜🎜🎜Makroaufgaben (nicht in Eile)🎜🎜🎜🎜Mikroaufgaben (in Eile)🎜🎜🎜🎜🎜🎜🎜<script></script>Gesamtcode🎜🎜Versprechen🎜🎜 🎜🎜setTimeout/ setInterval🎜🎜🎜🎜🎜🎜🎜

事件循环（Event loop）

执行顺序：

• 执行整体代码<script></script>（宏任务）

• 执行所有微任务

• 执行一个宏任务

• 执行渲染线程

• 2->3->2->3...依次循环（在 2、3 步中又创建了新的宏、微任务）

重复从宏任务和微任务队列里拿出任务去执行。

总结

因为浏览器设计的原因，JS 线程和渲染线程互斥，所以 JS 线程被设计成了单线程。

因为单线程执行一些操作（如网络请求）时有堵塞的问题，所有产生了异步。

因为有了异步，所以产生了异步编程，从而有了回调函数。

因为回调函数写多了会产生回调地狱，所有又有了解决回调地狱的 Promise 写法

自 ES7 标准后有了比 Promise 更加优雅的写法 ———— async/await 写法，也是异步编程的最终解决方法。

因为 JS 的代码分为同步和异步代码，同步代码的执行顺序不必多说，自上而下的执行。

但是如果有多个异步的代码，他的执行顺序又是怎么的呢？？

为了解决多个异步代码的执行顺序问了，有了事件循环（EventLoop），将异步任务区分为宏任务、微任务，依据规则依次执行。

至此 完！

练习

console.log("script start");
setTimeout(function() {
  console.log("timeout1");
}, 10);
new Promise((resolve) => {
  console.log("promise1");
  resolve();
  setTimeout(() => console.log("timeout2"), 10);
}).then(function() {
  console.log("then1");
});
console.log("script end");

写出 log 的输出结果，并说出理由。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonErfahren Sie Schritt für Schritt, wie Sie die asynchrone Programmierung in JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!