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

Der eigentliche Unterschied liegt in ihren Zielen.

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

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

So einfach ist das

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

Answer 2

Wenn Sie eine Funktion innerhalb von setInterval ausführen, die mehr Zeit als timeout-> arbeitet, bleibt der Browser stecken.

- Z.B., doStuff() braucht 1500 Sekunden für die Ausführung und Sie tun es: setInterval(doStuff, 1000);
1) Browser-Lauf doStuff() die 1,5 Sekunden für die Ausführung benötigt;
2) Nach ~1 Sekunde versucht es zu laufen doStuff() wieder. Aber vorher doStuff() wird noch ausgeführt-> also fügt der Browser diesen Lauf in die Warteschlange ein (um ihn auszuführen, nachdem der erste ausgeführt wurde).
3,4, ) Dasselbe Hinzufügen zur Warteschlange für die nächsten Iterationen, aber doStuff() von früher sind noch in Arbeit...
Das Ergebnis: Der Browser bleibt stecken.

Um dieses Verhalten zu verhindern, führen Sie am besten setTimeout innerhalb von setTimeout, um setInterval zu emulieren .
Um Zeitüberschreitungen zwischen setTimeout-Aufrufen zu korrigieren, können Sie selbstkorrigierende Alternative zu JavaScript's setInterval Technik.

Answer 3

Ihr Code wird unterschiedliche Ausführungsintervalle haben, und bei einigen Projekten, wie z. B. Online-Spielen, ist das nicht akzeptabel. Als erstes sollten Sie "myTimeoutFunction" folgendermaßen ändern, damit Ihr Code mit denselben Intevallen funktioniert:

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

Nach dieser Änderung wird sie gleich sein mit

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

Aber das Ergebnis ist immer noch nicht stabil, weil JS single-threaded ist. Für jetzt, wenn JS-Thread mit etwas beschäftigt sein wird, wird es nicht in der Lage, Ihre Callback-Funktion auszuführen, und die Ausführung wird für 2-3 msec verschoben werden. Haben Sie 60 Ausführungen pro Sekunde, und jedes Mal, wenn Sie zufällige 1-3 Sekunden Verzögerung haben, wird es absolut nicht akzeptabel (nach einer Minute wird es rund 7200 msec Verzögerung sein), und ich kann raten, etwas wie dieses 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 garantiert eine stabile Ausführungszeit. Auch wenn ein Thread beschäftigt ist und Ihr Code nach 1005 ms ausgeführt wird, wird er beim nächsten Mal eine Auszeit von 995 ms haben, und das Ergebnis wird stabil sein.

Answer 4

Ich verwende setTimeout.

Der Unterschied besteht offenbar darin, dass setTimeout die Methode einmal aufruft, setInterval dagegen wiederholt.

Hier ist ein guter Artikel, der den Unterschied erklärt: Anleitung: JavaScript-Zeitgeber mit setTimeout und setInterval

Answer 5

Ich habe einen einfachen Test gemacht mit setInterval(func, milisec) weil ich wissen wollte, was passiert, wenn der Zeitverbrauch der Funktion größer ist als die Intervalldauer.

setInterval wird allgemein die nächste Iteration direkt nach der Start der vorherigen Iteration, es sei denn, die Funktion ist noch im Gange . Wenn ja, setInterval wartet, bis die Funktion beendet ist. Sobald dies geschieht, wird die Funktion sofort wieder abgefeuert - es gibt kein Warten auf die nächste Iteration nach Zeitplan (wie es unter Bedingungen ohne Zeitüberschreitungsfunktion der Fall wäre). Es gibt auch keine Situation mit parallel laufenden Iterationen.

Ich habe dies mit Chrome v23 getestet. Ich hoffe, es ist deterministische Umsetzung über alle modernen Browser.

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

Le site wait Funktion ist nur ein Thread-Blocking-Helfer - synchroner Ajax-Aufruf, der genau 2500 Millisekunden der Verarbeitung auf der Serverseite:

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