L’uso di JavaScript SettimeOut è molto comune nella programmazione quotidiana con JavaScript. Tuttavia, molte volte non è ben compreso come funziona. Spiegheremo sia il concetto di Settimeout JavaScript e il SetInterval che è il metodo complementare e vedrà il suo funzionamento.
JavaScript Settimeout e curiosità
La funzione JavaScript SetIimeout è responsabile dell’esecuzione di un’altra funzione dopo un certo tempo. Di solito vengono utilizzati per gestire animazioni, transizioni e operazioni simili. Ci costruiremo l’esempio di “Hello World”.
function mensaje() { console.log("hola desde javascript");}setTimeout(mensaje,5000);
Questo messaggio eseguirà oltre 5 secondi nella console:
In questo momento tutto sembra molto semplice, ritardiamo semplicemente l’esecuzione 5 secondi. La realtà è un po ‘più complessa. Immagina di aggiungere il seguente codice Alla nostra pagina:
<html><head> <script type="text/javascript"> function mensaje() { console.log("hola desde javascript"); } setTimeout(mensaje,5000); function congelar () { var tiempo = new Date(); console.dir(tiempo); tiempo.setSeconds(tiempo.getSeconds() + 10); while (new Date().getTime() < tiempo.getTime()) { } console.log("pulsaste"); } </script></head><body><input type="button" value="congelar" onclick="congelar()" /></body></html>
Abbiamo appena aggiunto un pulsante che premendo esegue la funzione Freeze. Questa funzione esegue un ciclo infinito per 10 secondi.
Il risultato è che quando si esegue il nostro programma, il settimeout non viene stampato a 5 secondi, ma è stampato a 10. Cosa ha è successo ?. Dobbiamo ricordare che JavaScript ha solo un filo di esecuzione. Questo thread è responsabile dell’esecuzione di una coda di eventi registrati.
Nel nostro caso abbiamo due eventi, uno è il clic e un altro è il sextimeout che viene eseguito a 5 secondi. Quindi la nostra coda ha due eventi che JavaScript Thread deve eseguire. Se premiamo il pulsante appena il caricamento della pagina il primo evento che eseguiremo verrà eseguito clicca. Il problema è che genera un anello infinito e manterrà il thread JavaScript per 10 secondi.
di così Molto che abbiamo definito il sextimeout a 5 secondi, non può mai essere eseguito fino a quando il filo non viene rilasciato da 10 secondi.
prendiamo sempre in considerazione come funziona JavaScript lanciando le operazioni di questo tipo.
JavaScript Settentimeout VS SetInterval
La funzione SexTinterval è complementare a settimanale e ciò che ci consente Esegui una certa funzionalità ogni x tempo. La peculiarità è che l’intervallo deve avere una condizione finale. Vediamo:
<html><head> <script type="text/javascript"> var tope=0; var intervalo; function mensaje() { console.log("hola desde javascript"); tope++; if (tope>=10) { clearInterval(intervalo); } } function intervalo() { intervalo=setInterval(mensaje,1000); } </script></head><body><input type="button" value="intervalo" onclick="intervalo()" /></body></html>
Stampa ogni secondo “Ciao da JavaScript” sulla console fino a quando non decidiamo di terminare l’intervallo utilizzando il metodo ClearinterVal e supportaci Nella variabile STOP.
Abbiamo appena visto le differenze fondamentali tra JavaScript Settimeout vs SetInterval.
Altri articoli correlati: