Warum brauchst du asynchron? Warum? Lassen Sie uns ein Stück Code sehen.
Frage 1:
für (var i = 0; i <100000; i ++) {} alert ('Hallo Welt !!!');Dieser Code bedeutet, 100 Mal vor der Ausführung von Warnungen auszuführen. Das Problem, das dies mit sich bringt, ist, dass es die Ausführung des nachfolgenden Codes ernsthaft blockiert. Was warum, es liegt hauptsächlich daran, dass JS Single-Threaded ist.
Frage 2:
Normalerweise müssen wir dieses Problem lösen. Wenn wir dem Kopf Skriptcode hinzufügen müssen, schreiben wir den Code im Allgemeinen in window.onload (wenn das DOM betrieben wird). Haben Sie jemals darüber nachgedacht, warum wir window.onload hinzufügen müssen. Der Grund dafür ist, dass der HTML -Code -Browser hinter dem Skript, wenn Sie das DOM betreiben, nicht zu laden begonnen hat, aber Sie denken darüber nach, sie zu heiraten, bevor sie geboren wurde. Ist das möglich? Natürlich ist es unmöglich, Fenster hinzufügen. Der Grund, warum onload der Code im window.onload in der Lage ist, nach dem vollständigen Dokument auszuführen. Dies entspricht asynchron.
Frage 3:
Manchmal muss die Seite nicht den gesamten Code gleichzeitig laden, aber häufiger laden wir nur einen bestimmten Code nach einer bestimmten Anforderung.
Was ist ein einzelner Thread?
Sie können diese Weise verstehen, dass ein einzelner Thread die Ausführung von Codesegmenten ist, zuerst die vorherige Ausführung und dann die nächste ausführt, nachdem der vorherige abgeschlossen ist.
Welcher JS ist also asynchron?
Ich glaube, dass dieses Ding fast schlecht verwendet wird. Es ist setTimeout/setInterval und natürlich ajax. Ich glaube, jeder kennt Ajax asynchron. Natürlich kann es auch synchron sein, aber niemand tut es so. Einige Freunde wissen jedoch möglicherweise nicht anders, wenn SetTimeout und SetInterval asynchron sind. Lassen Sie uns darüber sprechen, warum SetTimeout asynchron ist.
setTimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0 Nach dem Ausführen dieses Codes werden die ersten Drucke 1 statt 0 gedruckt. Sind einige Freunde verwirrt? Obwohl wir den SetTimeout so einstellen, dass console.log(0) nach 0 Sekunden ausgeführt wird, ist der SetTimeout etwas ganz Besonderes, da er asynchron ist. Lassen Sie uns beiseite legen, warum der Druck 1 und dann 0 ist. Lassen Sie uns darüber sprechen, was asynchron ist.
Was ist asynchron?
In einigen Restaurants müssen Sie beispielsweise im Voraus Reservierungen vornehmen, und Sie können nur dann gehen, wenn andere mit dem Essen fertig sind. Wenn andere essen, können Sie also andere Dinge tun. Wenn andere mit dem Essen fertig sind, benachrichtigt jemand Sie, damit Sie gehen können. Für den Code wie Ajax definieren Sie eine Rückrufmethode. Diese Rückrufmethode wird zu diesem Zeitpunkt nicht ausgeführt, sondern wartet, bis die Serverantwort abgeschlossen ist, bevor dieser Code ausgeführt wird.
Kehren wir zum vorherigen Abschnitt von SetTimeout zurück. Es funktioniert so. Von dem Moment an, in dem Sie SetTimeout definieren (unabhängig davon, ob die Zeit 0 ist oder nicht), wird JS diesen Code nicht direkt ausführen, sondern ihn in eine Ereigniswarteschlange verworfen. Erst nach allen Synchronisierungsaufgaben auf der Seite wird der Code in der Ereigniswarteschlange ausgeführt. Was ist Synchronisation? Abgesehen von asynchronem Code ist es Synchronisation -_-.
Wie implementiere ich asynchrone JS?
1. Verwenden Sie SetTimout, um asynchron zu erreichen
setTimeout (function () {console.log (document.getElementByTagName ('body') [0]);}, 0)Es gibt jedoch ein kleines Problem mit SetTimeout, nämlich dass die Zeit ungenau ist. Wenn Sie diesen Code schneller ausführen möchten, können wir eine von HTML5 bereitgestellte Funktion verwenden.
RequestAnimationFrame (function () {console.log (document.getElementByTagName ('body') [0]);})Der Unterschied zwischen RequestArimationFrame und SetTimeOut besteht darin, dass RequestArimationFrame schneller ausgeführt wird als SetTimeout , so dass viele Personen RequestAnimationFrame verwenden, um Animationen zu erstellen.
2. Erstellen Sie dynamisch Skript -Tags
var head = document.getElementByTagName ('head') [0]; var script = document.createelement ('script'); script.src = 'mengzhuzi.js'; head.appendchild ('script');3.. Verwenden Sie die von Skript bereitgestellte Defer/Asynchronisation
<script src = "xx.js" Defer> </script>
Verschiebung: Dieser Code wird erst nach dem Laden der Seite ausgeführt.
<script src = "xx.js" async> </script>
Async: Führen Sie den Skriptcode asynchron aus
Asynchron ist jedoch ebenfalls ein Nachteil, wie der folgende Code:
Normaler Code:
Versuchen Sie {neue Fehler werfen ('Hello World');} catch (err) {console.log (err);} // Fehler: Hallo Welt (…)Asynchroner Code:
try {setTimout (function () {Neuen Fehler werfen ('Hello World');}, 0)} catch (err) {console.log (err);} // referenceError: setTimout ist nicht definiert (…)Es ist festzustellen, dass der Code im Fang nicht ausgeführt wird, was bedeutet, dass der Versuch den Code nicht im Asynchron erfassen kann.
Zusammenfassen
Das Asynchron in JS und wie man dies erreicht, ist im Grunde genommen vorbei. Es ist ein Klischee über JS Asynchronous, aber ich hoffe immer noch, dass der Inhalt dieses Artikels für alle hilfreich sein wird.