Heim >Web-Frontend >js-Tutorial >So implementieren Sie einen asynchronen Single-Threaded-Io-Callback mit JS

So implementieren Sie einen asynchronen Single-Threaded-Io-Callback mit JS

亚连
亚连Original
2018-06-23 11:52:111195Durchsuche

In diesem Artikel werden hauptsächlich die Eigenschaften von asynchronen Io-Rückrufen mit einem Thread in JavaScript analysiert. Ich hoffe, dass der von uns zusammengestellte Inhalt Ihnen helfen kann.

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 >

Zumindest JavaScript verwendet beim Betrieb des DOM verschiedene Ereignisrückrufe, z. B. Schaltflächen, Linkklicks, Mausübergabe, Fokuserfassung usw.

In diesem Prozess binden wir eine Ereignisrückruffunktion an den Dom Zum Beispiel onclick="doCheck()". Dieser Prozess dient dazu, ein Klickereignis für das dom-Element zu registrieren und eine Ereignisrückruffunktion doCheck() zu binden.

Wenn mit der Maus geklickt wird Wenn dieses Element verwendet wird, wird ein Das Ereignis wird ausgelöst und die Ereignisbindungsfunktion wird sofort ausgeführt und zurückgegeben.

Später, als ich mit JQuery in Kontakt kam, wurde die Syntax einer großen Anzahl von

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

immer schwieriger Es scheint, dass Sie sich immer mehr daran gewöhnen, aber Sie haben bemerkt, dass der vorherige Selektor nur DOM-Knoten auswählt und filtert und der nachfolgende Klick eine Ereignisregistrierung ist und die darin enthaltene Funktion () {} tatsächlich ein Parameter ist , die Parameter der Ereignisbindungsfunktion. Dazu müssen Sie mit der Syntax von JavaScript vertraut sein.

Funktion ist ein Objekt in JavaScript. Das Objekt kann sich auf alles auf der Welt beziehen, sodass das Objekt viele Attribute enthalten kann. Methoden usw.

Da es sich um ein Objekt handelt, kann es als Parameter übergeben werden. Diese Art von Funktion wird als Funktion höherer Ordnung bezeichnet.

Und diese Art von Funktion hat keine ein definierter Name, oder? Natürlich können Sie ihm einen Namen geben und ihn dann übergeben. Es ist jedoch dasselbe, aber es macht keinen Sinn, da das Funktionsobjekt hier tatsächlich ein formaler Parameter ist, also sind wir es gewohnt, dies nicht zu tun Geben Sie dieser Art von Funktion einen Namen. Dies wird oft als anonyme Funktion bezeichnet.

Folgen Sie der obigen $( "#id").click. Apropos, die Ereignisbindungsfunktion Es muss den gleichen Effekt haben wie die oben angegebene Onclick-Methode. Gehen Sie davon aus, dass im Browser mehrere Threads zum Ausführen des Skripts vorhanden sind Ich wollte den Wert von Element A ändern, aber Thread 2 hatte den Knoten von Element A zu diesem Zeitpunkt bereits gelöscht. Der Vorgang schlägt fehl und es wird ein Fehler gemeldet Der Browser sorgt nicht für die Konsistenz der Daten über mehrere Threads hinweg, oder der Front-End-Ingenieur verwaltet sie selbst, sodass ... der Browser nur einen Thread zum Betreiben des DOM hat, was eine Menge unnötiger Probleme erspart.

setTimeout(function(){
alert('弹出');
},300);

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

Glauben Sie, dass es nach 300 Millisekunden immer noch eine Chance auf einen Alarm gibt?

Nein, es wird nie eine Chance geben, Ihre Gefühle zu betrügen . Da der Browser Skripte im Single-Thread-Modus ausführt, hat Ihr setTimeout keine Wirkung mehr.

Die Welt von node.js behält die Eigenschaften von JavaScript im Browser vollständig bei, ein asynchroner Single-Thread-Rückruf, und gerade aufgrund dieser Funktion ist es das, was es ist, wenn node.js eine synchrone Sprache ist Alle npm-Pakete sind alle C++-Erweiterungen (schnell genug, oder?). Egal wie schnell Sie sind, Sie können die Verarbeitungsgeschwindigkeit der C-Sprache nicht übertreffen, oder? 🎜>

Das liegt gerade daran, dass sein asynchroner Rückruf IO seine Effizienz verbessern kann. Es erinnert mich an den Vergleich zwischen einem Fastfood-Restaurant in der Schule und der Schulkantine:

In der Kantine stehen alle Schüler Schlange Stellen Sie sich mit ihren Tellern in einer Reihe auf, die Schwester, die das Essen zubereitet hat, füllte es nacheinander und brachte das Essen nacheinander

Das Schulfasten Im Food-Restaurant stehen die Schüler auch Schlange, um zu bestellen. Nehmen Sie jedoch nach der Bestellung Ihren Pager mit einen Sitzplatz, um andere Dinge selbst zu erledigen, anstatt am Fenster zu stehen und auf das Essen zu warten, bis Ihr Essen herauskommt. In diesem Moment drückt der Kellner den Code entsprechend der Bestellnummer Der Tisch klingelt und Sie können einfach losgehen und sich das Essen holen. Das ist eine asynchrone Verarbeitung.

Einzelnes Threading kann die Ressourcenverschwendung und Wartungsschwierigkeiten reduzieren, die durch den Zustandswechsel verursacht werden Threads. Natürlich gibt es auch spezielle Pakete von Drittanbietern, die Multi-Core- und Multi-Thread-Szenarien unterstützen.

Das Obige ist das, was ich zusammengestellt habe hilfreich für alle in der Zukunft.

Verwandte Artikel:

Detaillierte Interpretation der Navigationsnutzung von React-Navigation

Detaillierte Interpretation der Funktionsfunktion in Javascript (ausführliches Tutorial )

So implementieren Sie eine benutzerdefinierte Visualisierung mit AngularJS2 integriert in D3.js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen asynchronen Single-Threaded-Io-Callback mit JS. 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