setTimeout oder setInterval?

Question

Soweit ich das beurteilen kann, diese beiden Stücke von Javascript verhalten 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 und setInterval ?

Answer 1

Sie versuchen, im Wesentlichen die gleiche Sache zu tun, aber der setInterval Ansatz wird genauer als der setTimeout Ansatz, da setTimeout 1000 ms wartet, läuft die Funktion und setzt dann eine andere Timeout. So ist die Wartezeit ist eigentlich ein bisschen mehr als 1000 ms (oder viel mehr, wenn Ihre Funktion dauert eine lange Zeit ausgeführt werden).

Altough könnte man denken, dass setInterval ausführt genau alle 1000 ms, ist es wichtig, dass setInterval zu beachten, auch verzögern, da JavaScript nicht eine Multi-Threaded ist die Sprache, was bedeutet, dass - wenn es andere Teile des Skripts Laufen sind -. das Intervall für das bis zum Ende warten müssen, wird

diese Fiddle , kann man deutlich sehen, dass das Timeout zurückfallen wird, während das Intervall fast die ganze Zeit bei fast 1 Aufruf / Sekunde (die das Skript versucht, zu tun). Wenn Sie die Geschwindigkeit variabel an der Spitze etwas klein wie 20 ändern (was bedeutet, es wird versuchen, 50-mal pro Sekunde ausgeführt werden), wird das Intervall nie ganz durchschnittlich 50 Iterationen pro Sekunde erreichen.

Die Verzögerung ist fast immer zu vernachlässigen, aber wenn man etwas wirklich präzise sind programmiert, sollten Sie für eine gehen selbstanpasse Timer (was ist im Wesentlichen ein Timeout-basierten Timer, passt sich ständig die Verzögerung es erstellt)

Answer 2

  

Gibt es einen Unterschied?

Ja. Ein Timeout führt eine gewisse Zeit nach SetTimeout () aufgerufen wird; ein Intervall führt eine gewisse Zeit nach dem vorherigen Intervall abgefeuert.

Sie werden den Unterschied bemerken, wenn Ihr doStuff () Funktion eine Weile dauert, auszuführen. wenn wir einen Aufruf an setTimeout / setInterval mit ., ein Brennen des Timeout / Intervalls mit * und JavaScript Code-Ausführung mit [-----] Zum Beispiel darstellen, sehen die Fristen wie:

Timeout:

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

Interval:

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

Die nächste Komplikation ist, wenn ein Intervall Feuer während JavaScript bereits damit beschäftigt ist, etwas zu tun (wie eine vorherige Intervall Handling). In diesem Fall wird das Intervall in Erinnerung, und geschieht, sobald die vorherigen Handler beendet und kehrt zum Browser steuern. So zum Beispiel für einen doStuff () Prozess, der manchmal kurz ([-]) und manchmal lang ([-----]):

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

• repräsentiert ein Intervall Brennen, das nicht seinen Code sofort ausführen kann, und wurde stattdessen gemacht anhängig ist.

So Abstände versuchen, ‚aufholen‘ im Zeitplan zurück. Aber sie Warteschlange nicht übereinander: Es kann immer nur eine Ausführung sein pro Intervall anhängig. (Wenn sie alle anstehenden, würde der Browser mit einer ständig wachsenden Liste der noch ausstehenden Hinrichtungen gelassen werden!)

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

x repräsentiert ein Intervall Brennen, die nicht ausführen kann oder anhängig gemacht werden, so wurde stattdessen verworfen.

Wenn Ihr doStuff () Funktion gewöhnlich länger dauert als das Intervall auszuführen, die für sie festgelegt ist, wird der Browser essen 100% CPU versucht, es zu reparieren, und werden möglicherweise weniger reagieren.

  

Welche tun Sie verwenden und warum?

Chained-Timeout gibt einen garantierten Schlitz freie Zeit an den Browser; Intervall versucht die Funktion sicherzustellen, dass es ausführt, so nah wie möglich an den festgelegten Zeiten, auf Kosten der Browser UI Verfügbarkeit ausgeführt wird.

würde ich ein Intervall betrachten für einmalige Animationen, die ich so glatt wie möglich sein wollte, während verkettete Timeouts höflicher für die laufende Animationen sind die statt die ganze Zeit, während die Seite geladen wird dauern würde. Für weniger anspruchsvolle Anwendungen (wie eine triviale Updater alle 30 Sekunden oder etwas Brennen), können Sie sicher entweder verwenden.

Im Hinblick auf die Browser-Kompatibilität, früher setTimeout setInterval, aber alle Browser Sie heute unterstützen beide treffen. Der letzte Nachzügler war viele Jahre lang IE Mobile in WinMo <6.5, aber hoffentlich auch das ist jetzt hinter uns.

Answer 3

setInterval ()

setInterval() ist ein Zeitintervall basiert die Ausführung von Code-Methode, die die native Fähigkeit, ein angegebenes Script wiederholt ausgeführt hat, wenn das Intervall erreicht ist. Es sollte nicht in seine Callback-Funktion durch den Skript Autor verschachtelt werden, um es Schleife zu machen, da es durch Standardschleifen . Es wird in dem Intervall halte Brennen, wenn Sie clearInterval() nennen.

Wenn Sie Animationen Schleife Code wollen oder auf einem CPU-Takt, dann setInterval() verwenden.

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

setTimeout ()

setTimeout() ist eine zeitbasierte Codeausführung Methode, die ein Skript ausführen wird nur einmal , wenn das Intervall erreicht ist. Es wird nicht noch einmal wiederholen, wenn Sie es in einer Schleife um das Skript Gang durch innerhalb der Funktion des setTimeout() Objekt nisten, um sie auszuführen aufruft. Wenn eine Schleife ausgerichtet ist, wird es in dem Intervall halten Brennen, wenn Sie clearTimeout() nennen.

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

Wenn Sie etwas wollen, einmal nach einer bestimmten Zeit geschehen kann, dann setTimeout() verwenden. Das ist, weil es führt nur ein einziges Mal, wenn das angegebene Intervall erreicht wird.

Answer 4

Die setInterval erleichtert zukünftige Ausführung des Codes zu löschen. Wenn Sie setTimeout verwenden, müssen Sie den Überblick über die Timer-ID für den Fall, halten Sie es wünschen, um sie abzubrechen später.

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

myTimeoutFunction();

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

Vergleich

function myTimeoutFunction()
{
    doStuff();
}

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

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

Answer 5

Ich finde die setTimeout Methode einfacher verwenden, wenn Sie das Timeout abbrechen mögen:

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

myTimeoutFunction();

Auch, wenn etwas in der Funktion schief gehen würde wird es nur stoppen beim ersten Mal Fehler zu wiederholen, anstatt den Fehler des Wiederholens jede Sekunde.

Answer 6

Der sehr Unterschied ist, in ihren Zwecken.

setInterval()
   -> executes a function, over and over again, at specified time intervals  

setTimeout()
   -> executes a function, once, after waiting a specified number of milliseconds

Es ist so einfach wie die

Ausführlichere Details hier http://javascript.info/tutorial/settimeout-setinterval

Answer 7

Wenn Sie eine Funktion innerhalb setInterval laufen, die mehr Zeit als timeout-> der Browser stecken wird funktioniert.

- Z. B. doStuff () nimmt 1500 sek. sein ausführen und Sie tun: setInterval (doStuff, 1000);
1) Browser laufen doStuff () , die 1,5 Sekunden dauert. ermordet werden;
2) Nach ~ 1 Sekunde versucht, es zu laufen doStuff () wieder. Aber zurück doStuff () ist nach wie vor executed-> so Browser diesen Lauf in die Warteschlange hinzufügt (laufen nach dem ersten Fall ist).
3,4, ..) Das gleiche Hinzufügen in die Warteschlange der Ausführung für den nächsten Iterationen, aber doStuff () aus früheren sind noch im Gange ...
Wie der ergebnis den Browser hängen geblieben ist.

dieses Verhalten zu verhindern, ist der beste Weg ist, SetTimeout innerhalb SetTimeout laufen setInterval zu emulieren.
Zur Korrektur Timeouts zwischen SetTimeout ruft, können Sie selbstkorrigierende Alternative zu setInterval Technik des JavaScript.

Answer 8

Ich verwende SetTimeout.

Anscheinend ist der Unterschied SetTimeout ruft die Methode einmal, setInterval nennt es repeatdly.

Hier ist ein guter Artikel erklärt den Unterschied: Tutorial: JavaScript-Timer mit setTimeout und setInterval

Answer 9

Ich habe einfachen Test von setInterval(func, milisec) gemacht, weil ich neugierig war, was passiert, wenn die Funktion Zeitaufwand größer ist als Intervalldauer ist.

setInterval wird im Allgemeinen Zeitplan nächste Iteration unmittelbar nach dem Start der vorherigen Iteration, , es sei denn die Funktion ist noch nicht abgeschlossen . Wenn ja, setInterval wird warten, bis die Funktion beendet. Sobald es geschieht, wird die Funktion sofort wieder gefeuert - dort für die nächste Iteration keine Warte nach Zeitplan ist (wie es unter den Bedingungen wäre ohne Zeitfunktion überschritten). Es gibt auch keine Situation mit parallel Iterationen ausgeführt wird.

Ich habe dies auf Chrome v23 getestet. Ich hoffe, es ist deterministisch Umsetzung in allen modernen Browsern.

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

Konsolenausgabe:

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

Die wait Funktion ist nur ein Thread blockiert Helfer - synchroner Ajax-Aufruf, die genau nimmt 2500 Millisekunden die Verarbeitung auf der Serverseite:

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

Answer 10

Ihr Code wird unterschiedliche Ausführungs intevals haben, und in einigen Projekten, wie Online-Spiele ist es nicht akzeptabel. Erstens, was Sie tun sollten, um Ihren Code Arbeit mit dem gleichen intevals zu machen, sollten Sie „myTimeoutFunction“, um dies zu ändern:

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

Nach dieser Änderung wird es gleich sein

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

Aber, Sie haben immer noch nicht stabil Ergebnis, da JS single-threaded ist. Vorerst wird, wenn JS Faden mit etwas beschäftigt sein, wird es nicht in der Lage sein, Ihre Callback-Funktion auszuführen, und die Ausführung wird für 2-3 ms verschoben werden. Sind Sie 60 Hinrichtung pro Sekunde haben, und jedes Mal, wenn Sie zufällig 1-3 Sekunden Verzögerung haben, wird es absolut nicht akzeptabel sein (nach einer Minute wird es um 7200 ms Verzögerung), und ich kann empfehlen, so etwas zu verwenden:

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

Dieser Code wird stabile Ausführung Zeitraum garantieren. Auch Thread beschäftigt sein wird, und Ihr Code wird nach 1005 mseconds, das nächste Mal ausgeführt werden, es Timeout für 995 ms haben wird, und das Ergebnis wird stabil sein.

Answer 11

es ein wenig anders zu sehen: setInterval stellt sicher, dass ein Code bei jedem gegebenen Intervall ausgeführt wird (das heißt 1000 ms, oder wie viel Sie angeben), während SetTimeout setzt die Zeit, es wartet, bis "den Code ausgeführt wird. Und da es zusätzliche Millisekunden dauert, den Code auszuführen, fügt er bis zu 1000 ms und somit SetTimeout läuft wieder an ungenauen Zeiten (1000 ms).

Zum Beispiel, Timer / Countdown nicht mit setTimeout getan, werden sie mit setInterval getan, es zu gewährleisten, nicht verzögern und der Code ausgeführt werden genau an dem vorgegebenen Intervall.

Answer 12

Sowohl setInterval und setTimeout eine Timer-ID zurück, die Sie verwenden können, um die Ausführung abzubrechen, das heißt, bevor die Timeouts ausgelöst werden. So brechen Sie entweder clearInterval oder clear wie folgt aufrufen:

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

Auch werden die Timeouts automatisch gelöscht, wenn Sie die Seite oder das Browserfenster schließen lassen.

Answer 13

Nun, das ist SetTimeout in einer Situation besser, als ich gerade gelernt haben. Ich benutze immer setInterval, die ich noch habe für mehr als eine halbe Stunde im Hintergrund laufen zu lassen. Wenn ich auf der Registerkarte zurückgeschaltet, die Diashow (auf dem der Code verwendet wurde) wurde verändert sich sehr schnell, statt alle 5 Sekunden, die es haben sollte. Es ist in der Tat noch einmal passieren, wie ich es testen und ob es die Schuld des Browsers oder nicht, ist nicht wichtig, denn mit setTimeout dieser Situation völlig unmöglich ist.

Answer 14

Sie können bobince Antwort selbst überprüfen, wenn Sie die folgenden Javascript oder lesen Sie in diesem JSFiddle

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

Answer 15

Der Unterschied ist offensichtlich in der Konsole:

Answer 16

Hinzufügen nur auf, was bereits gesagt worden, aber die setTimeout Version des Codes wird auch die Maximum call stack size erreichen, die sie von mehr funktionieren werden. Da es kein Basisfall für die rekursive Funktion bei so zu stoppen ist, können Sie es nicht haben läuft für immer.

Answer 17

Ich denke, SetInterval und SetTimeout unterschiedlich sind. SetInterval führt den Block entsprechend der Zeit eingestellt, während, SetTimeout führt den Codeblock einmal.

Versuchen Sie diese Reihe von Codes nach den Timeout Countdown Sekunden:

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

und dann versuchen,

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

Sie können die Unterschiede für sich selbst sehen.