JavaScript
Intervaller och timeouts

Syntax

• timeoutID = setTimeout (funktion () {}, millisekunder)
• intervalID = setInterval (funktion () {}, millisekunder)
• timeoutID = setTimeout (funktion () {}, millisekunder, parameter, parameter, ...)
• intervalID = setInterval (funktion () {}, millisekunder, parameter, parameter, ...)
• cleartimeout (timeoutID)
• clearInterval (intervalID)

Anmärkningar

intervaller

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

window.setInterval(waitFunc,5000);

Ta bort intervall

window.setInterval() returnerar ett IntervalID , som kan användas för att stoppa att intervallet fortsätter att köras. För att göra detta, lagra returvärdet för window.setInterval() i en variabel och ring clearInterval() med den variabeln som det enda argumentet:

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

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

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

Detta kommer att logga in This will be logged every 5 seconds var 5: e sekund, men kommer att stoppa det efter 32 sekunder. Så det kommer att logga meddelandet 6 gånger.

Ta bort timeouts

window.setTimout() returnerar en TimeoutID , som kan användas för att stoppa den timeout från att köras. För att göra detta, lagra returvärdet för window.setTimeout() i en variabel och ring clearTimeout() med den variabeln som det enda argumentet:

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

Detta kommer inte att logga meddelandet eftersom timern stoppas efter 3 sekunder.

Rekursiv setTimeout

För att upprepa en funktion på obestämd tid kan setTimeout kallas rekursivt:

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

setTimeout(repeatingFunc, 5000);

Till skillnad från setInterval garanterar detta att funktionen kommer att köras även om funktionens körtid är längre än den angivna fördröjningen. Det garanterar emellertid inte ett regelbundet intervall mellan funktionsutföranden. Detta beteende varierar också eftersom ett undantag innan det rekursiva samtalet till setTimeout kommer att förhindra att det upprepar igen, medan setInterval skulle upprepas på obestämd tid oavsett undantag.

setTimeout, orderordning, clearTimeout

setTimeout

• Utför en funktion efter att ha väntat ett visst antal millisekunder.
• används för att försena exekveringen av en funktion.

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

Exempel: Detta exempel sänder "hej" till konsolen efter 1 sekund. Den andra parametern är i millisekunder, så 1000 = 1 sek, 250 = 0,25 sek, etc.

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

Problem med setTimeout

om du använder metoden setTimeout i en för-loop :

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

Detta ger värdet 3 three gånger, vilket inte är korrekt.

Lösning av problemet:

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

Det kommer att mata ut värdet 0 , 1 , 2 . Här överför vi i till funktionen som en parameter ( j ).

Driftsordning

På grund av det faktum att Javascript är enkeltrådat och använder en global setTimeout kan setTimeout användas för att lägga till ett objekt i slutet av exekveringskön genom att ringa setTimeout med noll fördröjning. Till exempel:

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

console.log('hello');

Skickar faktiskt ut:

hello
world

Också, noll millisekunder här betyder inte att funktionen inuti setTimeout kommer att köras omedelbart. Det kommer att ta lite mer än det beroende på vilka objekt som ska köras kvar i körkön. Den här är bara skjuten till slutet av kön.

Avbryter en timeout

clearTimeout (): stoppar exekveringen av den funktion som anges i setTimeout()

Syntax: clearTimeout (timeoutVariable) eller windows.clearTimeout (timeoutVariable)

Exempel:

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

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

intervaller

Standard

Du behöver inte skapa variabeln, men det är en bra praxis eftersom du kan använda den variabeln med clearInterval för att stoppa det aktuella intervallet.

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

Om du behöver skicka parametrar till doSomething-funktionen kan du skicka dem som ytterligare parametrar utöver de två första till setInterval.

Utan överlappning

setInterval, som ovan, körs var 5: e sekund (eller vad du än ställer in det) oavsett vad. Även om funktionen doSomething tar lång tid än 5 sekunder att köra. Det kan skapa problem. Om du bara vill se till att det finns en paus mellan körningar av doSomething kan du göra detta:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()