O uso de JavaScript SetTimeOut é moi común na programación cotiá con JavaScript. Non obstante, moitas veces non se entende ben como funciona. Explicaremos tanto o concepto de preparación de JavaScript como a setinterval que é o método complementario e vexa a súa operación.
JavaScript Settimeout e curiosidades
A función Set ShoetInT de JavaScript é responsable de executar outra función despois dun certo tempo. Normalmente úsanse para xestionar animacións, transicións e operacións similares. Imos construír o exemplo de “Hello World”.
function mensaje() { console.log("hola desde javascript");}setTimeout(mensaje,5000);
Esta mensaxe executará 5 segundos na consola:
Neste momento todo parece moi sinxelo, simplemente atrasamos a execución de 5 segundos. A realidade é un pouco máis complexa. Imaxina que imos engadir o seguinte código á nosa páxina:
<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>
Acabamos de engadir un botón que presionar executa a función de conxelación. Esta función executa un ciclo infinito durante 10 segundos.
O resultado é que ao executar o noso programa, o establecemento non está impreso a 5 segundos, pero está impreso en 10. Que ten Pasou?
No noso caso temos dous eventos é o clic e outro é o establecemento que se executa a 5 segundos. Polo tanto, a nosa cola ten dous eventos que o fío de JavaScript debe executar. Se presionamos o botón de cargar a páxina o primeiro evento que executaremos será o clic. O problema é que xera un ciclo infinito e manterá o fío de JavaScript por 10 segundos.
por así moito que definimos o establecemento a 5 segundos, nunca se pode executar ata que o fío sexa liberado de 10 segundos.
Temos sempre en conta como funciona Javascript ao lanzar operacións deste tipo.
Javascript SetmoOut vs setinterval
A función establemental é complementaria para o establecemento e o que nos permite Executa unha certa funcionalidade cada tempo X. A peculiaridade é que o intervalo debe ter unha condición final. Imos a ver:
<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>
Isto imprimirá cada segundo “Ola de JavaScript” na consola ata que decidamos acabar co intervalo usando o método de borinterval e apoiarnos Na parada variable.
Acabamos de ver as diferenzas fundamentais entre JavaScript SetTimeOut vs setinterval.
Outros artigos relacionados: