JavaScript
Intervalle und Timeouts

Syntax

• timeoutID = setTimeout (Funktion () {}, Millisekunden)
• IntervallID = setInterval (Funktion () {}, Millisekunden)
• timeoutID = setTimeout (Funktion () {}, Millisekunden, Parameter, Parameter, ...)
• IntervallID = setInterval (Funktion () {}, Millisekunden, Parameter, Parameter, ...)
• clearTimeout (timeoutID)
• clearInterval (Intervall-ID)

Bemerkungen

Intervalle

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}

window.setInterval(waitFunc,5000);

Intervalle entfernen

window.setInterval() gibt eine IntervalID , die verwendet werden kann, um die Fortsetzung des Intervalls zu stoppen. Speichern Sie dazu den Rückgabewert von window.setInterval() in einer Variablen und rufen Sie clearInterval() mit dieser Variablen als einziges Argument auf:

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}    

var interval = window.setInterval(waitFunc,5000);

window.setTimeout(function(){
    clearInterval(interval);
},32000);

Dies wird protokolliert. This will be logged every 5 seconds alle 5 Sekunden This will be logged every 5 seconds , aber nach 32 Sekunden wird es gestoppt. So wird die Nachricht 6 Mal protokolliert.

Timeouts entfernen

window.setTimout() gibt eine TimeoutID , die verwendet werden kann, um die Ausführung dieses Timeouts zu stoppen. Speichern Sie dazu den Rückgabewert von window.setTimeout() in einer Variablen und rufen Sie clearTimeout() mit dieser Variablen als einziges Argument auf:

function waitFunc(){
    console.log("This will not be logged after 5 seconds");
}
function stopFunc(){
    clearTimeout(timeout);
}

var timeout = window.setTimeout(waitFunc,5000);
window.setTimeout(stopFunc,3000);

Dadurch wird die Nachricht nicht protokolliert, da der Timer nach 3 Sekunden angehalten wird.

Rekursiver setTimeout

Um eine Funktion unbegrenzt zu wiederholen, kann setTimeout rekursiv aufgerufen werden:

function repeatingFunc() {
    console.log("It's been 5 seconds. Execute the function again.");
    setTimeout(repeatingFunc, 5000);
}

setTimeout(repeatingFunc, 5000);

Im Gegensatz zu setInterval wird dadurch sichergestellt, dass die Funktion auch dann ausgeführt wird, wenn die Laufzeit der Funktion länger ist als die angegebene Verzögerung. Ein regelmäßiges Intervall zwischen Funktionsausführungen wird jedoch nicht garantiert. Dieses Verhalten variiert auch, da eine Ausnahme vor dem rekursiven Aufruf von setTimeout die Wiederholung verhindert, während setInterval unabhängig von Ausnahmen setInterval wiederholt wird.

setTimeout, Reihenfolge der Operationen, clearTimeout

setTimeout

• Führt eine Funktion aus, nachdem eine angegebene Anzahl von Millisekunden gewartet wurde.
• Wird verwendet, um die Ausführung einer Funktion zu verzögern.

Syntax: setTimeout(function, milliseconds) oder window.setTimeout(function, milliseconds)

Beispiel: In diesem Beispiel wird nach 1 Sekunde "Hallo" an die Konsole ausgegeben. Der zweite Parameter ist in Millisekunden, also 1000 = 1 s, 250 = 0,25 s usw.

setTimeout(function() {
    console.log('hello');
}, 1000);

Probleme mit setTimeout

Wenn Sie die setTimeout Methode in einer for-Schleife verwenden :

for (i = 0; i < 3; ++i) {
  setTimeout(function(){
    console.log(i);
  }, 500);
}

Dies gibt den Wert 3 three dreimal aus, was nicht korrekt ist.

Problemumgehung für dieses Problem:

for (i = 0; i < 3; ++i) {
  setTimeout(function(j){
    console.log(i);
  }(i), 1000);
}

Es wird der Wert 0 , 1 , 2 ausgegeben. Hier übergeben wir das i als Parameter ( j ) an die Funktion.

Reihenfolge der Operationen

Aufgrund der Tatsache, dass Javascript ein einzelner Thread ist und eine globale Ereignisschleife verwendet, kann mit setTimeout ein Element am Ende der Ausführungswarteschlange setTimeout werden, indem setTimeout Verzögerung setTimeout . Zum Beispiel:

setTimeout(function() {
    console.log('world');
}, 0);

console.log('hello');

Wird tatsächlich ausgegeben:

hello
world

Null Millisekunden bedeutet hier nicht, dass die Funktion innerhalb von setTimeout sofort ausgeführt wird. Je nach den auszuführenden Elementen in der Ausführungswarteschlange ist etwas mehr Zeit erforderlich. Dieser wird nur bis zum Ende der Warteschlange gedrückt.

Zeitüberschreitung abbrechen

clearTimeout (): stoppt die Ausführung der in setTimeout() angegebenen Funktion

Syntax: clearTimeout (timeoutVariable) oder window.clearTimeout (timeoutVariable)

Beispiel:

var timeout = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeout); // The timeout will no longer be executed

Intervalle

Standard

Sie müssen die Variable nicht erstellen, es ist jedoch eine bewährte Methode, da Sie diese Variable zusammen mit clearInterval verwenden können, um das aktuell laufende Intervall zu stoppen.

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */

Wenn Sie der doSomething-Funktion Parameter übergeben müssen, können Sie sie als zusätzliche Parameter an die ersten beiden Parameter von setInterval übergeben.

Ohne sich zu überlappen

setInterval wird wie oben alle 5 Sekunden ausgeführt (oder was auch immer Sie eingestellt haben), egal was passiert. Auch wenn die Funktion doSomething länger als 5 Sekunden ausgeführt wird. Das kann zu Problemen führen. Wenn Sie nur sicherstellen möchten, dass sich diese Pause zwischen den Runs von doSomething befindet, können Sie Folgendes tun:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()