Detaillierte Erläuterung des Arbeitsmechanismus der asynchronen Javascript-Verarbeitung_Javascript-Fähigkeiten

Grundsätzlich ist es sehr wichtig zu verstehen, wie JavaScript-Timer funktionieren. Die Ausführung von Timern unterscheidet sich oft von unserer intuitiven Vorstellung. Das liegt daran, dass die JavaScript-Engine Single-Threaded ist. Lassen Sie uns zunächst verstehen, wie die folgenden drei Funktionen Timer steuern.

var id = setTimeout(fn, delay); – Initialisiert einen Timer und führt ihn dann nach dem angegebenen Zeitintervall aus. Diese Funktion gibt eine eindeutige Flag-ID (Nummerntyp) zurück, mit der wir den Timer abbrechen können.
var id = setInterval(fn, delay); – Etwas ähnlich wie setTimeout, ruft jedoch kontinuierlich eine Funktion auf (das Zeitintervall ist der Verzögerungsparameter), bis sie abgebrochen wird.
clearInterval(id);, clearTimeout(id); – ​​Verwenden Sie die Timer-ID (den Rückgabewert von setTimeout und setInterval), um das Auftreten des Timer-Rückrufs abzubrechen
Um das Innenleben von Timern zu verstehen, muss ein wichtiges Konzept besprochen werden: Timer-Verzögerungen sind nicht garantiert. Da der gesamte JavaScript-Code in einem Thread ausgeführt wird, werden alle asynchronen Ereignisse (z. B. Mausklicks und Timer) nur dann ausgeführt, wenn sie eine Chance zur Ausführung haben.

In diesem Diagramm gibt es viele Informationen zu verstehen, und wenn Sie es vollständig verstehen, werden Sie ein gutes Verständnis dafür haben, wie die JavaScript-Engine asynchrone Ereignisse implementiert. Dies ist ein eindimensionales Symbol: Die vertikale Richtung stellt die Zeit dar und die blauen Blöcke stellen JavaScript-Code-Ausführungsblöcke dar. Beispielsweise dauert der erste Ausführungsblock des JavaScript-Codes etwa 18 ms, der durch einen Mausklick ausgelöste Codeausführungsblock dauert 11 ms und so weiter.

Da die JavaScript-Engine jeweils nur einen Code ausführt (dies liegt an der Single-Threaded-Natur von JavaScript), „blockiert“ jeder JavaScript-Codeausführungsblock die Ausführung anderer asynchroner Ereignisse. Das heißt, wenn ein asynchrones Ereignis auftritt (z. B. ein Mausklick, ein Timer wird ausgelöst oder eine asynchrone Ajax-Anfrage), werden die Rückruffunktionen dieser Ereignisse am Ende der Ausführungswarteschlange in die Warteschlange gestellt und warten darauf, ausgeführt zu werden (tatsächlich). , die Warteschlangenmethode hängt vom Browser ab. Sie variiert je nach Gerät, es handelt sich also nur um eine Vereinfachung.

Beginnen Sie mit dem Lernen ab dem ersten JavaScript-Ausführungsblock, in dem zwei Timer initialisiert werden: ein 10-ms-setTimeout() und ein 10-ms-setInterval(). Abhängig davon, wann und wo der Timer initialisiert wird (er beginnt zu zählen, nachdem der Timer initialisiert wurde), wird der Timer tatsächlich ausgelöst, bevor die Ausführung des ersten Codeblocks abgeschlossen ist. Die an den Timer gebundene Funktion wird jedoch nicht sofort ausgeführt (der Grund, warum sie nicht sofort ausgeführt wird, ist, dass JavaScript Single-Threaded ist). Tatsächlich werden die verzögerten Funktionen am Ende der Ausführungswarteschlange in die Warteschlange gestellt und warten auf den nächsten geeigneten Zeitpunkt für die Ausführung.

Außerdem sehen wir im ersten JavaScript-Ausführungsblock, dass ein „Mausklick“-Ereignis auftritt. Eine JavaScript-Rückruffunktion ist an dieses asynchrone Ereignis gebunden (wir wissen nie, wann der Benutzer dieses (Klick-)Ereignis ausführt, daher wird es als asynchron betrachtet. Diese Funktion wird nicht sofort ausgeführt, wie der Timer oben, sondern wird in die Warteschlange gestellt). Ende der Ausführungswarteschlange und wartet auf die Ausführung zum nächsten geeigneten Zeitpunkt.

Wenn der erste JavaScript-Ausführungsblock ausgeführt wird, stellt der Browser sofort eine Frage: Welche Funktion (Anweisung) wartet auf die Ausführung? Zu diesem Zeitpunkt warten eine „Mausklick-Ereignishandlerfunktion“ und eine „Timer-Rückruffunktion“ auf ihre Ausführung. Der Browser wählt eine aus (eigentlich wählt er die „Handlerfunktion für Mausklickereignisse“ aus, da auf dem Bild zu sehen ist, dass sie zuerst in die Warteschlange gestellt wird) und führt sie sofort aus. Die „Timer-Callback-Funktion“ wartet auf die nächste geeignete Ausführungszeit.

Beachten Sie, dass bei Ausführung der „Mausklick-Ereignishandlerfunktion“ die Rückruffunktion setInterval zum ersten Mal ausgelöst wird. Wie die Rückruffunktion setTimeout wird sie am Ende der Ausführungswarteschlange in die Warteschlange gestellt und wartet auf die Ausführung. Beachten Sie jedoch Folgendes: Wenn die Rückruffunktion setInterval zum zweiten Mal ausgelöst wird (die Funktion setTimeout wird zu diesem Zeitpunkt noch ausgeführt), wird die erste Auslösung von setInterval verworfen. Wenn ein langer Codeblock ausgeführt wird, werden möglicherweise alle setInterval-Rückruffunktionen am Ende der Ausführungswarteschlange in die Warteschlange gestellt. Nach der Ausführung des Codeblocks ist das Ergebnis eine große Reihe von setInterval-Rückruffunktionen, die darauf warten, ausgeführt zu werden, und zwischen diesen Funktionen Keine Pausen, bis alles erledigt ist. Daher neigen Browser dazu, den nächsten Handler an das Ende der Warteschlange zu stellen, wenn sich keine weiteren Intervallhandler in der Warteschlange befinden (dies ist auf das Intervallproblem zurückzuführen).

Wir können feststellen, dass beim Auslösen der dritten Rückruffunktion setInterval die vorherige Rückruffunktion setInterval noch ausgeführt wird. Dies verdeutlicht eine sehr wichtige Tatsache: setInterval berücksichtigt nicht, was gerade ausgeführt wird, sondern stellt alle blockierten Funktionen an das Ende der Warteschlange. Dies bedeutet, dass das Zeitintervall zwischen zwei setInterval-Rückruffunktionen geopfert (verkürzt) wird.

Wenn schließlich die zweite Rückruffunktion setInterval ausgeführt wird, können wir sehen, dass kein Programm auf die Ausführung der JavaScript-Engine wartet. Das bedeutet, dass der Browser nun darauf wartet, dass ein neues asynchrones Ereignis auftritt. Bei 50 ms wird erneut eine neue setInterval-Rückruffunktion ausgelöst. Zu diesem Zeitpunkt blockiert kein Ausführungsblock ihre Ausführung. Es wird also sofort ausgeführt.

Lassen Sie uns anhand eines Beispiels den Unterschied zwischen setTimeout und setInterval verdeutlichen:

 setTimeout ( function ( ) { 
   /* Some long block of code... */ 
  setTimeout (arguments. callee, 10 ); 
  }, 10 ); 
  
 setInterval ( function ( ) { 
   /* Some long block of code... */ 
  }, 10 );
 

Diese beiden Codezeilen scheinen sich auf den ersten Blick nicht zu unterscheiden, aber sie sind unterschiedlich. Das Intervall zwischen der Ausführung der Rückruffunktion setTimeout und der vorherigen Ausführung beträgt mindestens 10 ms (möglicherweise mehr, aber nicht weniger als 10 ms), während die Rückruffunktion setInterval versucht, alle 10 ms auszuführen, unabhängig davon, ob die letzte Ausführung abgeschlossen ist.

Wir haben hier viel gelernt, um es zusammenzufassen:

Die JavaScript-Engine ist Single-Threaded, wodurch alle asynchronen Ereignisse zur Ausführung in die Warteschlange gestellt werden müssen
Bei der Ausführung von asynchronem Code gibt es grundlegende Unterschiede zwischen setTimeout und setInterval
Wenn ein Timer blockiert ist und nicht sofort ausgeführt werden kann, verzögert er die Ausführung bis zum nächstmöglichen Ausführungszeitpunkt (der länger als das erwartete Zeitintervall ist)
Wenn die Ausführungszeit der Rückruffunktion setInterval lang genug ist (länger als das angegebene Zeitintervall), werden sie kontinuierlich und ohne Zeitintervall zueinander ausgeführt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der asynchronen Javascript-Verarbeitung hilfreich ist.