Was ist asynchrones Javascript? Was ist der Nutzen?
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: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注)Nach dem Login kopieren
an. Hat
//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
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);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
-
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
- 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Wie implementiert man asynchrone Programmierung mit C++-Funktionen?
Apr 27, 2024 pm 09:09 PM
Zusammenfassung: Asynchrone Programmierung in C++ ermöglicht Multitasking, ohne auf zeitaufwändige Vorgänge warten zu müssen. Verwenden Sie Funktionszeiger, um Zeiger auf Funktionen zu erstellen. Die Rückruffunktion wird aufgerufen, wenn der asynchrone Vorgang abgeschlossen ist. Bibliotheken wie boost::asio bieten asynchrone Programmierunterstützung. Der Praxisfall zeigt, wie man mit Funktionszeigern und boost::asio asynchrone Netzwerkanfragen umsetzt.
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Häufige Probleme und Lösungen bei der asynchronen Programmierung im Java-Framework
Jun 04, 2024 pm 05:09 PM
3 häufige Probleme und Lösungen bei der asynchronen Programmierung in Java-Frameworks: Callback Hell: Verwenden Sie Promise oder CompletableFuture, um Callbacks intuitiver zu verwalten. Ressourcenkonflikt: Verwenden Sie Synchronisierungsprimitive (z. B. Sperren), um gemeinsam genutzte Ressourcen zu schützen, und erwägen Sie die Verwendung threadsicherer Sammlungen (z. B. ConcurrentHashMap). Nicht behandelte Ausnahmen: Behandeln Sie Ausnahmen in Aufgaben explizit und verwenden Sie ein Ausnahmebehandlungs-Framework (z. B. CompletableFuture.exclusionally()), um Ausnahmen zu behandeln.
Wie geht das Golang-Framework mit Parallelität und asynchroner Programmierung um?
Jun 02, 2024 pm 07:49 PM
Das Go-Framework nutzt die Parallelitäts- und Asynchronitätsfunktionen von Go, um einen Mechanismus zur effizienten Abwicklung gleichzeitiger und asynchroner Aufgaben bereitzustellen: 1. Parallelität wird durch Goroutine erreicht, sodass mehrere Aufgaben gleichzeitig ausgeführt werden können. 2. Asynchrone Programmierung wird über Kanäle implementiert kann ausgeführt werden, ohne den Hauptthread zu blockieren. Geeignet für praktische Szenarien wie die gleichzeitige Verarbeitung von HTTP-Anfragen, die asynchrone Erfassung von Datenbankdaten usw.
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
Asynchrone Python-Programmierung: Eine Möglichkeit, effiziente Parallelität in asynchronem Code zu erreichen
Feb 26, 2024 am 10:00 AM
1. Warum asynchrone Programmierung verwenden? Bei der herkömmlichen Programmierung werden I/O-Vorgänge blockiert. Das bedeutet, dass das Programm auf den Abschluss eines Vorgangs wartet, bevor es fortfährt. Dies kann für eine einzelne Aufgabe gut funktionieren, kann jedoch dazu führen, dass das Programm bei der Verarbeitung einer großen Anzahl von Aufgaben langsamer wird. Die asynchrone Programmierung durchbricht die Einschränkungen herkömmlicher blockierender E/A und verwendet nicht blockierende E/A. Dies bedeutet, dass das Programm Aufgaben zur Ausführung auf verschiedene Threads oder Ereignisschleifen verteilen kann, ohne auf den Abschluss der Aufgabe warten zu müssen. Dadurch kann das Programm mehrere Aufgaben gleichzeitig bearbeiten und so die Leistung und Effizienz des Programms verbessern. 2. Die Grundlage der asynchronen Python-Programmierung Die Grundlage der asynchronen Python-Programmierung sind Coroutinen und Ereignisschleifen. Coroutinen sind Funktionen, die es einer Funktion ermöglichen, zwischen Anhalten und Wiederaufnehmen zu wechseln. Die Ereignisschleife ist für die Planung verantwortlich
Was sind die Vor- und Nachteile der asynchronen Programmierung in PHP?
May 06, 2024 pm 10:00 PM
Zu den Vorteilen der asynchronen Programmierung in PHP gehören ein höherer Durchsatz, eine geringere Latenz, eine bessere Ressourcennutzung und Skalierbarkeit. Zu den Nachteilen gehören Komplexität, Schwierigkeiten beim Debuggen und eingeschränkte Bibliotheksunterstützung. Im konkreten Fall wird ReactPHP zur Abwicklung von WebSocket-Verbindungen verwendet und demonstriert so die praktische Anwendung der asynchronen Programmierung.
Asynchrone Python-Programmierung: Entdecken Sie die Essenz der asynchronen Programmierung und optimieren Sie die Codeleistung
Feb 26, 2024 am 11:20 AM
Asynchrone Programmierung, englisch Asynchronous Programming, bedeutet, dass bestimmte Aufgaben im Programm gleichzeitig ausgeführt werden können, ohne auf den Abschluss anderer Aufgaben warten zu müssen, wodurch die Gesamtbetriebseffizienz des Programms verbessert wird. In Python ist das Asyncio-Modul das Hauptwerkzeug zur Implementierung der asynchronen Programmierung. Es stellt Coroutinen, Ereignisschleifen und andere für die asynchrone Programmierung erforderliche Komponenten bereit. Coroutine: Coroutine ist eine spezielle Funktion, die angehalten und dann wieder ausgeführt werden kann, genau wie ein Thread, aber eine Coroutine ist leichter und verbraucht weniger Speicher als ein Thread. Die Coroutine wird mit dem Schlüsselwort „async“ deklariert und die Ausführung wird mit dem Schlüsselwort „await“ angehalten. Ereignisschleife: Die Ereignisschleife (EventLoop) ist der Schlüssel zur asynchronen Programmierung
