L’ús de JavaScript setTimeout és molt habitual en la programació del dia a dia amb JavaScript. No obstant això moltes vegades no s’entén bé com funciona. Anem a explicar tant el concepte de JavaScript setTimeout com el de setInterval que és el mètode complementari i veure el seu funcionament.
estigui habilitat setTimeout i curiositats
La funció de JavaScript setTimeout s’encarrega d’executar altra funció després d’un temps determinat. Se solen utilitzar per gestionar animacions, transicions i operacions similars. Construirem l’exemple de “hola món”.
function mensaje() { console.log("hola desde javascript");}setTimeout(mensaje,5000);
Aquest missatge s’executarà després de 5 segons a la consola:
a hores d’ara tot sembla molt senzill, simplement retardem l’execució 5 segons. la realitat és una mica més complexa. Imaginem-nos que afegim el següent codi a la nostra pàgina:
<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>
Acabem d’afegir un botó que a l’prémer executa la funció de congelar. Aquesta funció executa un bucle infinit durant 10 segons.
el resultat és que a l’executar el nostre programa el setTimeout no s’imprimeix als 5 segons sinó que s’imprimeix als 10. ¿ què és el que ha passat ?. Hem de recordar que JavaScript només disposa d’un fil d’execució. Aquest fil s’encarrega d’executar una cua d’esdeveniments que estiguin registrats.
En el nostre cas disposem de dos esdeveniments un és el clic i un altre és el setTimeout que s’executa als 5 segons. Per tant la nostra cua disposa de dos esdeveniments que el fil de JavaScript haurà d’executar. Si premem el botó res mes carregar la pàgina el primer esdeveniment que executarem serà clic. El problema és que genera un bucle infinit i mantindrà ocupat a l’thread de JavaScript durant 10 segons.
Per tant per molt que hàgim definit el setTimeout a 5 segons aquest mai podrà realitzar fins que el fil s’alliberi per aquest motiu tard 10 segons.
Tinguem sempre en compte com funciona JavaScript a l’llançar operacions d’aquest tipus.
estigui habilitat setTimeout vs setInterval
La funció setInterval és complementària a setTimeout i el que ens permet és executar una certa funcionalitat cada x temps. La peculiaritat és que l’interval ha de tenir una condició de finalització. Anem a veure-ho:
<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>
Això ens imprimirà cada segon “hola des Javascript” a la consola fins que decidim finalitzar l’interval utilitzant el mètode clearInterval i recolzant-nos en la variable límit.
Acabem de veure les diferències fonamentals entre JavaScript setTimeout vs setInterval.
Altres articles relacionats: