JavaScript
Intervallen en time-outs

Syntaxis

• timeoutID = setTimeout (function () {}, milliseconds)
• intervalID = setInterval (function () {}, milliseconden)
• timeoutID = setTimeout (functie () {}, milliseconden, parameter, parameter, ...)
• intervalID = setInterval (functie () {}, milliseconden, parameter, parameter, ...)
• clearTimeout (timeoutID)
• clearInterval (intervalId)

Opmerkingen

intervallen

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

window.setInterval(waitFunc,5000);

Intervallen verwijderen

window.setInterval() retourneert een IntervalID , die kan worden gebruikt om te voorkomen dat dat interval verder wordt uitgevoerd. Hiertoe slaat u de retourwaarde van window.setInterval() in een variabele en roept u clearInterval() met die variabele als het enige argument:

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

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

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

Dit zal loggen. This will be logged every 5 seconds de 5 seconden, maar stopt het na 32 seconden. Het bericht wordt dus 6 keer vastgelegd.

Time-outs verwijderen

window.setTimout() retourneert een TimeoutID , die kan worden gebruikt om die time-out te stoppen. Hiertoe slaat u de retourwaarde van window.setTimeout() in een variabele en roept u clearTimeout() met die variabele als het enige argument:

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);

Hiermee wordt het bericht niet vastgelegd omdat de timer na 3 seconden wordt gestopt.

Recursieve setTimeout

Om een functie voor onbepaalde tijd te herhalen, kan setTimeout recursief worden aangeroepen:

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

setTimeout(repeatingFunc, 5000);

In tegenstelling tot setInterval zorgt dit ervoor dat de functie wordt uitgevoerd, zelfs als de looptijd van de functie langer is dan de opgegeven vertraging. Het biedt echter geen garantie voor een regelmatig interval tussen het uitvoeren van functies. Dit gedrag varieert ook omdat een uitzondering vóór de recursieve aanroep van setTimeout voorkomt dat het opnieuw wordt herhaald, terwijl setInterval voor onbepaalde tijd zou herhalen, ongeacht uitzonderingen.

setTimeout, volgorde van bewerkingen, clearTimeout

setTimeout

• Voert een functie uit, na een bepaald aantal milliseconden te hebben gewacht.
• wordt gebruikt om de uitvoering van een functie uit te stellen.

Syntaxis: setTimeout(function, milliseconds) of window.setTimeout(function, milliseconds)

Voorbeeld: in dit voorbeeld wordt na 1 seconde "hallo" naar de console uitgevoerd. De tweede parameter is in milliseconden, dus 1000 = 1 sec, 250 = 0,25 sec, enz.

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

Problemen met setTimeout

als u de methode setTimeout gebruikt in een for-lus :

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

Hierdoor wordt de waarde 3 three driemaal uitgevoerd, wat niet correct is.

Oplossing van dit probleem:

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

Het zal de waarde 0 , 1 , 2 . Hier geven we de i aan de functie als parameter ( j ).

Volgorde van bewerkingen

Bovendien, omdat Javascript single threaded is en een globale gebeurtenislus gebruikt, kan setTimeout worden gebruikt om een item toe te voegen aan het einde van de uitvoeringswachtrij door setTimeout zonder vertraging aan te roepen. Bijvoorbeeld:

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

console.log('hello');

Zal daadwerkelijk uitvoeren:

hello
world

Ook betekent nul milliseconden hier niet dat de functie binnen de setTimeout onmiddellijk wordt uitgevoerd. Het duurt iets meer dan dat, afhankelijk van de uit te voeren items die in de uitvoeringswachtrij blijven. Deze is net aan het einde van de wachtrij geplaatst.

Time-out annuleren

clearTimeout (): stopt de uitvoering van de functie die is opgegeven in setTimeout()

Syntaxis: clearTimeout (timeoutVariable) of window.clearTimeout (timeoutVariable)

Voorbeeld:

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

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

intervallen

Standaard

U hoeft de variabele niet te maken, maar het is een goede gewoonte omdat u die variabele met clearInterval kunt gebruiken om het huidige actieve interval te stoppen.

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

Als u parameters aan de doSomething-functie moet doorgeven, kunt u deze als extra parameters voorbij de eerste twee aan setInterval doorgeven.

Zonder overlappen

setInterval, zoals hierboven, wordt om de 5 seconden uitgevoerd (of waar u het ook op instelt), ongeacht wat. Zelfs als de functie doSomething er langer dan 5 seconden over doet om te werken. Dat kan problemen veroorzaken. Als je er gewoon voor wilt zorgen dat er een pauze is tussen het uitvoeren van doSomething, kun je dit doen:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()