JavaScript
Intervalli e Timeout

Sintassi

• timeoutID = setTimeout (function () {}, millisecondi)
• intervalID = setInterval (function () {}, millisecondi)
• timeoutID = setTimeout (function () {}, millisecondi, parametro, parametro, ...)
• intervalID = setInterval (function () {}, millisecondi, parametro, parametro, ...)
• clearTimeout (timeoutID)
• clearInterval (intervalID)

Osservazioni

intervalli

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

window.setInterval(waitFunc,5000);

Rimozione degli intervalli

window.setInterval() restituisce un IntervalID , che può essere utilizzato per interrompere tale intervallo dal continuare a correre. Per fare ciò, memorizzare il valore di ritorno di window.setInterval() in una variabile e chiamare clearInterval() con tale variabile come unico argomento:

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

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

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

Questo registro This will be logged every 5 seconds ogni 5 secondi, ma verrà interrotto dopo 32 secondi. Quindi registrerà il messaggio 6 volte.

Rimozione dei timeout

window.setTimout() restituisce un TimeoutID , che può essere utilizzato per interrompere il timeout in esecuzione. Per fare ciò, memorizzare il valore di ritorno di window.setTimeout() in una variabile e chiamare clearTimeout() con quella variabile come unico argomento:

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

Questo non registrerà il messaggio perché il timer si ferma dopo 3 secondi.

SetTimeout ricorsivo

Per ripetere una funzione indefinitamente, setTimeout può essere chiamato in modo ricorsivo:

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

setTimeout(repeatingFunc, 5000);

A differenza di setInterval , ciò garantisce che la funzione venga eseguita anche se il tempo di esecuzione della funzione è superiore al ritardo specificato. Tuttavia, non garantisce un intervallo regolare tra le esecuzioni delle funzioni. Questo comportamento varia anche perché un'eccezione prima della chiamata ricorsiva a setTimeout impedirà il ripetersi, mentre setInterval si ripeterà indefinitamente a prescindere dalle eccezioni.

setTimeout, ordine delle operazioni, clearTimeout

setTimeout

• Esegue una funzione, dopo aver atteso un numero specificato di millisecondi.
• utilizzato per ritardare l'esecuzione di una funzione.

Sintassi: setTimeout(function, milliseconds) o window.setTimeout(function, milliseconds)

Esempio: questo esempio restituisce "ciao" alla console dopo 1 secondo. Il secondo parametro è in millisecondi, quindi 1000 = 1 sec, 250 = 0,25 sec, ecc.

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

Problemi con setTimeout

se stai utilizzando il metodo setTimeout in un ciclo for :

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

Questo produrrà il valore 3 three volte, il che non è corretto.

Soluzione alternativa di questo problema:

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

Produrrà il valore 0 , 1 , 2 . Qui, stiamo passando l' i nella funzione come parametro ( j ).

Ordine delle operazioni

Inoltre, a causa del fatto che Javascript è a thread singolo e utilizza un ciclo di eventi globale, setTimeout può essere utilizzato per aggiungere un elemento alla fine della coda di esecuzione chiamando setTimeout con zero delay. Per esempio:

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

console.log('hello');

Produrrà effettivamente:

hello
world

Inoltre, zero millisecondi qui non significa che la funzione all'interno di setTimeout verrà eseguita immediatamente. Ci vorrà un po 'più di quello a seconda degli elementi da eseguire rimanenti nella coda di esecuzione. Questo è semplicemente spinto alla fine della coda.

Annullamento di un timeout

clearTimeout (): interrompe l'esecuzione della funzione specificata in setTimeout()

Sintassi: clearTimeout (timeoutVariable) o window.clearTimeout (timeoutVariable)

Esempio :

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

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

intervalli

Standard

Non è necessario creare la variabile, ma è una buona pratica in quanto è possibile utilizzare tale variabile con clearInterval per interrompere l'intervallo attualmente in esecuzione.

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

Se è necessario passare parametri alla funzione doSomething, è possibile passarli come parametri aggiuntivi oltre i primi due per impostareIntervallo.

Senza sovrapposizioni

setInterval, come sopra, verrà eseguito ogni 5 secondi (o qualsiasi cosa tu lo imposti) indipendentemente da cosa. Anche se la funzione doSomething richiede più di 5 secondi per l'esecuzione. Questo può creare problemi. Se vuoi solo assicurarti che ci sia una pausa tra le fasi di doSomething, puoi farlo:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()