O uso do SetTimeout JavaScript é muito comum na programação do dia-a-dia com JavaScript. No entanto, muitas vezes não é bem entendido como funciona. Vamos explicar tanto o conceito de settime de JavaScript quanto o SetInterval que é o método complementar e vê sua operação.
Javascript SetTimeout e curiosidades
A função Javascript Setimeout é responsável por executar outra função depois de um certo tempo. Eles são geralmente usados para gerenciar animações, transições e operações semelhantes. Vamos construir o exemplo de “Olá World”.
function mensaje() { console.log("hola desde javascript");}setTimeout(mensaje,5000);
Esta mensagem será executada por 5 segundos no console:
Neste momento Parece muito simples, simplesmente atrasamos a execução 5 segundos. A realidade é um pouco mais complexa. Imagine vamos adicionar o seguinte código. Para nossa 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>
Acabamos de adicionar um botão que pressionar executa a função de congelamento. Esta função executa um loop infinito por 10 segundos.
O resultado é que, ao executar nosso programa, o settimeout não é impresso em 5 segundos, mas é impresso em 10. O que aconteceu. Devemos lembrar que o JavaScript só tem um fio de execução. Este tópico é responsável por executar uma fila de eventos registrados.
<. / p>
No nosso caso, temos dois eventos, um é o clique e outro é o settimeout que é executado em 5 segundos. Portanto, nossa cauda tem dois eventos que o fio JavaScript deve executar. Se nós pressionarmos o botão apenas carregando a página o primeiro evento que executaremos será clicado. O problema é que ele gera um loop infinito e manterá o fio JavaScript por 10 segundos.
por tão Muito que definimos o settimeout a 5 segundos, ele nunca pode ser executado até que o segmento seja liberado de 10 segundos.
Sempre levamos em conta como JavaScript funciona lançando operações deste tipo.
javascript settimeout vs setInterval
a função settinterval é complementar para o settimeout e o que nos permite Execute uma determinada funcionalidade a cada hora x. A peculiaridade é que o intervalo deve ter uma condição final. Vamos 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>
Isso irá imprimir cada segundo “Olá de JavaScript” no console até decidirmos terminar o intervalo usando o método ClearInterval e nos apoiarmos Na parada variável.
Acabamos de ver as diferenças fundamentais entre o SetTimeout JavaScript vs SetInterval.
Outros artigos relacionados: