setTimeout oder setInterval?

Question

Soweit ich das beurteilen kann, verhalten sich diese beiden Teile von Javascript auf die gleiche Weise:

Option A:

function myTimeoutFunction()
{
    doStuff();
    setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

Option B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

Gibt es einen Unterschied zwischen der Verwendung von setTimeout y setIntervall ?

Answer 1

Sie versuchen im Wesentlichen das Gleiche, aber die setInterval Ansatz wird genauer sein als der setTimeout Ansatz, da setTimeout wartet 1000ms, führt die Funktion aus und setzt dann eine weitere Zeitüberschreitung. Die Wartezeit beträgt also etwas mehr als 1000 ms (oder sehr viel mehr, wenn Ihre Funktion sehr lange für die Ausführung braucht).

Obwohl man denken könnte, dass setInterval wird ausgeführt genau alle 1000ms, ist es wichtig zu beachten, dass setInterval verzögert sich ebenfalls, da JavaScript keine Multi-Thread-Sprache ist, was bedeutet, dass - wenn andere Teile des Skripts laufen - das Intervall warten muss, bis diese beendet sind.

Unter diese Fiedel können Sie deutlich sehen, dass die Zeitüberschreitung nachlässt, während das Intervall fast die ganze Zeit bei fast 1 Aufruf/Sekunde liegt (was das Skript versucht). Wenn Sie die Geschwindigkeitsvariable oben auf etwas Kleines wie 20 ändern (was bedeutet, dass das Skript versucht, 50 Mal pro Sekunde auszuführen), wird das Intervall nie ganz einen Durchschnitt von 50 Iterationen pro Sekunde erreichen.

Die Verzögerung ist fast immer vernachlässigbar, aber wenn Sie etwas wirklich Präzises programmieren, sollten Sie sich für eine selbsteinstellende Zeitschaltuhr (der im Wesentlichen ein auf Zeitüberschreitung basierender Timer ist, der sich ständig an die von ihm erzeugte Verzögerung anpasst)

Answer 2

Gibt es einen Unterschied?

Ja. Ein Timeout wird eine bestimmte Zeit nach dem Aufruf von setTimeout() ausgeführt; ein Intervall wird eine bestimmte Zeit nach dem Auslösen des vorherigen Intervalls ausgeführt.

Sie werden den Unterschied bemerken, wenn Ihre doStuff()-Funktion eine Weile zur Ausführung braucht. Wenn wir zum Beispiel einen Aufruf von setTimeout/setInterval mit . ein Auslösen des Timeouts/Intervalls mit * und die Ausführung von JavaScript-Code mit [-----] sehen die Zeitleisten wie folgt aus:

Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]

Die nächste Komplikation tritt auf, wenn ein Intervall ausgelöst wird, während JavaScript bereits mit einer anderen Aufgabe beschäftigt ist (z. B. mit der Bearbeitung eines vorherigen Intervalls). In diesem Fall wird das Intervall gespeichert und tritt ein, sobald der vorherige Handler beendet ist und die Kontrolle an den Browser zurückgibt. So zum Beispiel bei einem doStuff()-Prozess, der manchmal kurz ([-]) und manchmal lang ([-----]) ist:

.    *    *    •    *    •    *    *
     [-]  [-----][-][-----][-][-]  [-]

- steht für einen Intervallbrand, der seinen Code nicht sofort ausführen konnte und stattdessen in die Schwebe gebracht wurde.

Die Intervalle versuchen also, den Rückstand aufzuholen, um den Zeitplan einzuhalten. Aber sie reihen sich nicht aneinander: Es kann immer nur eine Ausführung pro Intervall anstehen. (Würden sie sich alle in eine Warteschlange einreihen, hätte der Browser eine immer länger werdende Liste ausstehender Ausführungen).

.    *    •    •    x    •    •    x
     [------][------][------][------]

x steht für einen Intervallbrand, der nicht ausgeführt oder in die Schwebe gebracht werden konnte und daher verworfen wurde.

Wenn Ihre doStuff()-Funktion gewohnheitsmäßig länger für die Ausführung braucht als das für sie festgelegte Intervall, verbraucht der Browser 100 % der CPU, um sie zu bedienen, und ist möglicherweise weniger reaktionsschnell.

Welche verwenden Sie und warum?

Chained-Timeout gibt dem Browser ein garantiertes freies Zeitfenster; Interval versucht sicherzustellen, dass die ausgeführte Funktion so nah wie möglich an den geplanten Zeiten ausgeführt wird, was auf Kosten der Verfügbarkeit der Browser-Oberfläche geht.

Ich würde ein Intervall für einmalige Animationen in Betracht ziehen, die so reibungslos wie möglich ablaufen sollen, während verkettete Timeouts für laufende Animationen, die ständig ablaufen, während die Seite geladen wird, höflicher sind. Für weniger anspruchsvolle Anwendungen (wie z. B. ein trivialer Updater, der alle 30 Sekunden oder so etwas auslöst), können Sie beide sicher verwenden.

Was die Browserkompatibilität betrifft, so ist setTimeout älter als setInterval, aber alle Browser, die Sie heute kennen, unterstützen beide. Der letzte Nachzügler war viele Jahre lang der IE Mobile in WinMo <6.5, aber auch das liegt jetzt hoffentlich hinter uns.

Answer 3

setInterval()

setInterval() ist eine auf Zeitintervallen basierende Codeausführungsmethode, die die native Fähigkeit besitzt, ein angegebenes Skript wiederholt auszuführen, wenn das Intervall erreicht ist. Sie sollte no vom Skriptautor in seine Callback-Funktion verschachtelt werden, um eine Schleife zu erzeugen, da sie Schleifen standardmäßig . Es wird weiterhin im Intervall gefeuert, es sei denn, Sie rufen clearInterval() .

Wenn Sie Code für Animationen oder bei einem Ticken der Uhr in einer Schleife laufen lassen wollen, dann verwenden Sie setInterval() .

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout()

setTimeout() ist eine zeitbasierte Code-Ausführungsmethode, die ein Skript nur dann ausführt, wenn einmalig wenn das Intervall erreicht ist. Es wird no wiederholen, es sei denn, Sie richten es so ein, dass das Skript in einer Schleife läuft, indem Sie die setTimeout() Objekt innerhalb der Funktion, die es zur Ausführung aufruft. Wenn es auf eine Schleife ausgerichtet ist, wird es im Intervall weiterlaufen, es sei denn, Sie rufen clearTimeout() .

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

Wenn Sie möchten, dass etwas einmalig nach einer bestimmten Zeitspanne geschieht, dann verwenden Sie setTimeout() . Das liegt daran, dass sie nur einmal ausgeführt wird, wenn das angegebene Intervall erreicht ist.

Answer 4

Mit setInterval können Sie die zukünftige Ausführung Ihres Codes leichter abbrechen. Wenn Sie setTimeout verwenden, müssen Sie die Timer-ID im Auge behalten, falls Sie die Ausführung später abbrechen möchten.

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

gegen

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);

Answer 5

Ich finde die setTimeout Methode einfacher zu verwenden, wenn Sie die Zeitüberschreitung abbrechen möchten:

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();

Wenn in der Funktion etwas schief geht, wird die Wiederholung beim ersten Fehler einfach gestoppt, anstatt den Fehler jede Sekunde zu wiederholen.