Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Merkmale des asynchronen JS-Single-Threaded-IO-Rückrufs

Detaillierte Erläuterung der Merkmale des asynchronen JS-Single-Threaded-IO-Rückrufs

小云云
小云云Original
2018-01-03 10:46:391373Durchsuche

Die meisten unserer ersten Kontakte mit JavaScript begannen mit js-Skripten in HTML. Allerdings verwenden wir diese scheinbar einfache Sprache seit mehreren Jahren, ohne einige ihrer Prinzipien und Mechanismen zu verstehen B. Schaltfläche, Linkklick, Mausübergabe, Fokuserfassung usw. In diesem Artikel werden hauptsächlich die Merkmale asynchroner JavaScript-Single-Threaded-IO-Rückrufe analysiert. Ich hoffe, dass der von uns zusammengestellte Inhalt Ihnen helfen kann.

In diesem Prozess binden wir eine Event-Callback-Funktion an den Dom, wie zum Beispiel onclick="doCheck()". Dieser Prozess dient dazu, ein Klickereignis für das Dom-Element zu registrieren und eine Event-Callback-Funktion doCheck() zu binden.

Wenn die Maus auf dieses Element klickt, wird ein Ereignis ausgelöst und die Ereignisbindungsfunktion wird sofort ausgeführt und zurückgegeben.

Später, als ich mit jquery in Kontakt kam, eine große Anzahl von


$("#id").click(function(){
alert('点击事件');
});

Ich scheine an diese JQuery-Syntax gewöhnt zu sein, da ich immer mehr schreibe, aber Sie haben bemerkt, dass der vorherige Selektor nur Dom-Knoten auswählt und filtert Klicken Sie dann auf Es handelt sich um eine Ereignisregistrierung, und die darin enthaltene Funktion () {} ist tatsächlich ein Parameter. Der Parameter der Ereignisbindungsfunktion erfordert, dass Sie mit der Syntax von Javascript vertraut sind Objekt in Javascript. Objekte können auf alles auf der Welt verweisen, daher können Objekte viele Attribute, Methoden usw. enthalten.

Da es sich um ein Objekt handelt, kann es als Parameter übergeben werden eine Funktion höherer Ordnung.

Und diese Art von Funktion hat keinen definierten Namen, oder? Natürlich kann man ihr einen Namen geben, und es ist dasselbe, wenn man den Namen übergibt, aber es ist so bedeutungslos, da das Funktionsobjekt hier eigentlich ein formaler Parameter ist, daher sind wir es gewohnt, dieser Funktion keinen Namen zu geben, was oft als anonyme Funktion bezeichnet wird

Als nächstes sprechen wir von $("#id" .click oben, wenn das Click-Ereignis ausgelöst wird, muss die Ereignisbindungsfunktion ausgeführt werden. Und oben hat die direkte Zuweisung der Onclick-Methode auf dem DOM den gleichen Effekt.

Gehen Sie davon aus, dass im Browser mehrere Threads vorhanden sind Können Sie sich das Chaos beim Ausführen des Skripts vorstellen? Thread 1 ist dabei, Element A zu ändern. Wert: Thread zwei hat Element A bereits aus dem DOM-Baum gelöscht . Diese Situation ist nicht schlimm. Entweder schafft es der Browser nicht, die Datenkonsistenz über mehrere Threads hinweg aufrechtzuerhalten, oder die Front-End-Ingenieure pflegen sie selbst, sodass der Browser nur einen Thread zum Betreiben des Doms hat, was viel spart unnötiger Ärger.


Glauben Sie, dass nach 300 Millisekunden immer noch die Möglichkeit einer Warnung ('Pop-up') besteht
setTimeout(function(){
alert('弹出');
},300);

while(true){
	........
}

Nein, Es wird nie eine Chance geben, 300 Millisekunden zu warten, da der Browser das Skript im Single-Thread-Modus ausführt.

Sobald sich der Thread im Endlosschleifenmodus befindet und die while-Anweisung ausführt, Ihr setTimeout hat keine Wirkung mehr.

Dann betreten wir die Welt von node.js, die die Verwendung von Javascript vollständig beibehält. Die Funktion des Browsers, der asynchrone Rückruf mit einem Thread, ist genau auf diese Funktion zurückzuführen node.js ist eine synchrone Sprache, auch wenn alle npm-Pakete C++-Erweiterungen sind (es ist schnell genug), egal wie schnell Sie sind. Es ist nicht so schnell wie die C-Sprachverarbeitung, oder? Dann wurde node.js vielleicht schon früher von PHP verachtet Es wurde geboren.

Gerade aufgrund seines asynchronen Callback-IO kann es seine Effizienz verbessern, was mich an den Vergleich zwischen einem Fastfood-Restaurant in der alten Schule und der Schulkantine erinnert:

In der Cafeteria stellten sich alle Schüler mit ihren Tellern in einer Reihe auf, und die Schwester, die den Reis kochte, füllte ihn nacheinander und servierte den Reis nacheinander. Das ist das Ergebnis der Synchronisierung.

Auch in Schul-Fastfood-Restaurants stehen die Schüler Schlange, um zu bestellen, aber nach der Bestellung können Sie Ihren Pager nehmen und sich einen Platz suchen. Auf diese Weise kann der Kellner viele Leute innerhalb einer Zeiteinheit bedienen. Die Leute bieten Service an, und Studenten, die Mahlzeiten bestellt haben, können sich einen Platz suchen, um andere Dinge selbst zu erledigen, anstatt am Fenster zu stehen und auf das Essen zu warten. Sobald Ihre Mahlzeit herauskommt, drückt der Kellner den Code entsprechend der Bestellung Nummer, und dann klingelt der Pager auf dem Tisch und Sie holen sich das Essen. Wenn der Pager ertönt, kann ein einzelner Thread die Verschwendung reduzieren Ressourcen, die durch den Statuswechsel zwischen mehreren Threads verursacht werden, sind schwierig. Natürlich gibt es spezielle Pakete von Drittanbietern, die Multi-Core- und Multi-Thread-Szenarien unterstützen.

Verwandte Empfehlungen:

Single-Threaded setTimeout in JavaScript

Wie die Single-Threaded-Programmiersprache PHP Multithread-Operationen implementiert

Einige ausführliche Einführung in einige Dinge zum JavaScript-Single-Threading (Bilder)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Merkmale des asynchronen JS-Single-Threaded-IO-Rückrufs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn