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.
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,
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);
//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注) console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);Man kann sagen, dass dies tatsächlich zu einem weiteren Wissenspunkt fü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
//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);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); console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);
const btn = document.querySelector('button')
btn.onclick = () => {
console.log("点击了");
}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
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
