Esistono due tipi (principalmente usati) di funzione timer in javascript setTimeoute setInterval( altro )
Entrambi questi metodi hanno la stessa firma. Prendono una funzione di richiamata e ritardano il tempo come parametro.
setTimeoutviene eseguito una sola volta dopo il ritardo, mentre setIntervalcontinua a chiamare la funzione di richiamata dopo ogni ritardo di millisecondi.
entrambi questi metodi restituiscono un identificatore intero che può essere utilizzato per cancellarli prima della scadenza del timer.
clearTimeouted clearIntervalentrambi questi metodi accettano un identificatore intero restituito dalle funzioni precedenti setTimeoutesetInterval
Esempio:
setTimeout
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Se esegui il codice precedente vedrai che avvisa before setTimeoute after setTimeoutinfine avvisa I am setTimeoutdopo 1sec (1000ms)
Quello che puoi notare dall'esempio è che setTimeout(...)è asincrono, il che significa che non aspetta che il timer scada prima di passare alla prossima istruzione, ad es.alert("after setTimeout");
Esempio:
setInterval
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Se esegui il codice sopra riportato vedrai che avvisa before setIntervale after setIntervalinfine avvisa I am setInterval 5 volte dopo 1sec (1000ms) perché setTimeout azzera il timer dopo 5 secondi oppure ogni 1 secondo riceverai un avviso I am setIntervalInfinito.
Come lo fa internamente il browser?
Spiegherò in breve.
Per capire che devi sapere sulla coda degli eventi in JavaScript. C'è una coda di eventi implementata nel browser. Ogni volta che un evento viene attivato in js, tutti questi eventi (come clic ecc.) Vengono aggiunti a questa coda. Quando il tuo browser non ha nulla da eseguire, prende un evento dalla coda e li esegue uno per uno.
Ora, quando chiami setTimeouto il setIntervaltuo callback viene registrato su un timer nel browser e viene aggiunto alla coda degli eventi allo scadere del tempo prestabilito ed eventualmente javascript prende l'evento dalla coda e lo esegue.
Questo accade, perché i motori javascript sono a thread singolo e possono eseguire solo una cosa alla volta. Pertanto, non possono eseguire altri javascript e tenere traccia del timer. Questo è il motivo per cui questi timer sono registrati con il browser (i browser non sono a thread singolo) e possono tenere traccia del timer e aggiungere un evento nella coda dopo la scadenza del timer.
lo stesso accade setIntervalsolo in questo caso l'evento viene aggiunto più volte alla coda dopo l'intervallo specificato fino a quando non viene cancellato o aggiornato la pagina del browser.
Nota
Il parametro di ritardo che si passa a queste funzioni è il tempo di ritardo minimo per eseguire la richiamata. Questo perché dopo la scadenza del timer il browser aggiunge l'evento alla coda che deve essere eseguito dal motore javascript ma l'esecuzione del callback dipende dalla posizione degli eventi nella coda e poiché il motore è a thread singolo eseguirà tutti gli eventi in la coda uno per uno.
Pertanto, il callback potrebbe richiedere a volte più del tempo di ritardo specificato per essere chiamato specialmente quando l'altro codice blocca il thread e non gli dà il tempo di elaborare ciò che è in coda.
E come ho già detto, javascript è single thread. Quindi, se blocchi il thread a lungo.
Mi piace questo codice
while(true) { //infinite loop
}
Il tuo utente potrebbe ricevere un messaggio che dice che la pagina non risponde .
setTimeout(function(){/*YourCode*/},1000);