Wie JavaScript-Timer funktionieren

Tags (durch Leerzeichen getrennt): JavaScript-Timer

Kürzlich habe ich mich mit den Ajax-Prinzipien befasst , Ich habe einen ausländischen Artikel gesehen, der das Funktionsprinzip des JavaScript-Timers erklärt, was mir geholfen hat, den Single-Thread-Arbeitsmodus von js gut zu verstehen. Übersetzen Sie es hier als Referenz, Originaladresse.
Übersetzungstext
Grundsätzlich ist es sehr wichtig zu verstehen, wie JavaScript-Timer funktionieren. Normalerweise verhält sich js in einem einzelnen Thread. Schauen wir uns zunächst die drei Funktionen an, mit denen Timer erstellt und betrieben werden können.

 - 启动单个定时器，在延迟后调用指定的功能。该函数返回一个唯一的ID，该Id可以用于取消定时器    var id = setTimeout(fn, delay); 
 - 类似setTimeout但不断地调用函数（每次都有延迟），直到它被取消，类似于定时任务。同上也返回唯一ID用于取消定时器    var id = setInterval(fn, delay); 
 - 接受计时器ID（由上述任一功能返回）并停止触发计时器回调。
    clearInterval(id);
    clearTimeout(id);

Um das Innenleben von Timern zu verstehen, müssen wir ein wichtiges Konzept untersuchen: Es gibt keine Garantie für die Genauigkeit von Timer-Verzögerungen. Da das gesamte JavaScript im Browser in einem einzelnen Thread ausgeführt wird, werden asynchrone Ereignisse (z. B. Mausklicks und Timer) nur ausgeführt, wenn sie ausgeführt werden können. Dies lässt sich am besten anhand eines Diagramms wie diesem veranschaulichen:

In diesem Diagramm gibt es viele Informationen zu verstehen, und wenn Sie es vollständig verstehen, erhalten Sie ein besseres Verständnis von Asynchronität JavaScript Die Art und Weise, wie die Ausführung funktioniert. Dieses Diagramm ist eindimensional: Vertikal haben wir die (Wanduhr-)Zeit in Millisekunden. Das blaue Kästchen stellt den Teil des JavaScript dar, der ausgeführt wird. Beispielsweise dauert die Ausführung des ersten JavaScript-Blocks etwa 18 ms, ein Mausklick auf den Block dauert etwa 11 ms und so weiter.

Da JavaScript jeweils nur ein Stück Code ausführen kann (aufgrund seiner Single-Threaded-Natur), „blockiert“ jeder Codeblock den Fortschritt anderer asynchroner Ereignisse. Dies bedeutet, dass, wenn ein asynchrones Ereignis eintritt (z. B. ein Mausklick, das Auslösen eines Timers oder der Abschluss einer XMLHttpRequest), es zur späteren Ausführung in die Warteschlange gestellt wird (die Art und Weise, wie diese Warteschlange tatsächlich erfolgt, hängt vom Browser ab). Browser variieren, hier ist eine kurze Beschreibung Erläuterung).

Starten Sie zunächst im ersten Block von JavaScript zwei Timer: 10 ms setTimeout und 10 ms setInterval. Je nachdem, wo und wann der Timer startet, wird er tatsächlich ausgelöst, bevor wir den ersten Codeblock tatsächlich abgeschlossen haben. Beachten Sie jedoch, dass es nicht sofort ausgeführt wird (dies ist aufgrund von Threads nicht möglich), sondern in die Warteschlange gestellt wird, um zum nächsten verfügbaren Zeitpunkt ausgeführt zu werden.

Zusätzlich sehen wir im ersten JavaScript-Block den Mausklick. Der mit dem Mausklickereignis verbundene JavaScript-Rückruf (wir wissen nie, wann der Benutzer eine Aktion ausführt, daher wird er als asynchron betrachtet) kann nicht sofort ausgeführt werden, daher wird er wie der anfängliche Timer in die Warteschlange gestellt, um später ausgeführt zu werden.

Unmittelbar nachdem der erste JavaScript-Block abgeschlossen ist, fragt der ausführende Browser: Welche Aufgaben befinden sich in der Warteschlange und warten darauf, ausgeführt zu werden? In diesem Fall warten sowohl der Mausklick-Handler als auch der Timer-Rückruf. Der Browser wählt dann einen aus (Mausklick-Callback) und führt ihn sofort aus. Der Timer wartet, bis er das nächste Mal zur Ausführung aus der Warteschlange genommen wird.

Beachten Sie, dass bei der Ausführung des Mausklick-Handlers der erste Intervall-Callback ausgeführt wird. Wie ein Timer wird sein Handler zur späteren Ausführung in die Warteschlange gestellt. Bitte beachten Sie jedoch, dass der Intervallrückruf von Interval verworfen wird, wenn das Intervall erneut ausgelöst wird (beim Ausführen des Timerprogramms). (Anmerkung des Übersetzers: Ich verstehe es hier nicht sehr gut. Bitte hinterlassen Sie eine Nachricht, um Ratschläge auszutauschen. Ist es weil bereits ein Intervall in der Warteschlange steht? Wenn Sie den Intervall-Callback aufrufen möchten, während Sie einen großen Codeblock ausführen, wird der Intervall-Callback kontinuierlich und ohne Verzögerung zwischen ihnen zur Aufgabenwarteschlange hinzugefügt. Der Browser geht oft einfach in die Warteschlange, um die Aufgabe abzurufen, bis keine anderen Aufgaben mehr in der Warteschlange sind.

Tatsächlich können wir sehen, dass der dritte Intervall-Callback ausgelöst wird, während das Intervall selbst ausgeführt wird. Dies zeigt uns eine wichtige Tatsache: Intervallen ist es egal, was gerade ausgeführt wird, sie stehen wahllos in der Warteschlange.

Nachdem die Ausführung des zweiten Intervall-Callbacks abgeschlossen ist, können wir schließlich sehen, dass die JavaScript-Engine keine Aufgaben mehr auszuführen hat. Das bedeutet, dass der Browser nun darauf wartet, dass ein neues asynchrones Ereignis auftritt. Wenn das Intervall erneut ausgelöst wird, befindet es sich bei der 50-ms-Position. Dieses Mal wird jedoch kein Programm ausgeführt, sodass es sofort ausgelöst wird.

Sehen wir uns ein Beispiel an, um den Unterschied zwischen setTimeout und setInterval besser zu veranschaulichen.

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

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

Diese beiden Codeteile mögen auf den ersten Blick funktional gleichwertig erscheinen, sind es aber nicht. Es ist zu beachten, dass der setTimeout-Code immer eine Verzögerung von mindestens 10 ms nach der vorherigen Rückrufausführung aufweist (am Ende kann es mehr sein, aber niemals weniger als 10 ms), während setInterval jedes Mal versucht, während dieser langen Codeausführung einen Rückruf auszuführen alle 10 ms (Anmerkung des Übersetzers: Es ist verständlich, dass während der Ausführung dieses langen Codes alle 10 ms eine Aufgabe zur Warteschlange hinzugefügt wird, ohne dazwischen liegende Intervalle).

Wir haben hier viel gelernt, lassen Sie uns noch einmal Revue passieren lassen:

Die JavaScript-Engine verfügt nur über einen Thread, sodass asynchrone Ereignisse zur Ausführung in die Warteschlange gestellt werden müssen.
setTimeout und setInterval unterscheiden sich grundlegend darin, wie sie asynchronen Code ausführen.
Wenn die sofortige Ausführung des Timers blockiert ist, wird er bis zum nächstmöglichen Ausführungspunkt verzögert (wodurch die erforderliche Verzögerung überschritten wird).
Wenn die Ausführungszeit des Rückrufprogramms in setInterval lang genug ist (die angegebene Verzögerung überschreitet), kann das Intervall ohne Verzögerung ausgeführt werden (Anmerkung des Übersetzers: Da ein weiterer Rückruf hinzugefügt wird, wenn die Ausführung eines Rückrufs noch nicht abgeschlossen ist).
All dies sind sehr wichtige Kenntnisse für das Verständnis der Funktionsweise der JavaScript-Engine, insbesondere der großen Anzahl asynchroner Ereignisse, die auftreten, und legen den Grundstein für die Erstellung fortschrittlichen Anwendungscodes.

Verwandte Empfehlungen:

Funktionsprinzip des Javascript-Timers

Über die Analyse des Timerprinzips in JavaScript

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Funktionsweise von JavaScript-Timern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!