setTimeout() , setInterval() e clearInterval() !

Essas funções são muito úteis, no Javascript, quando são necessárias execuções paralelas durante um determinado período de tempo como por exemplo: chats, refresh automático na tela, controle de tempo, uso junto com ajax, etc.

Para rodar uma função uma única vez após um intervalo de tempo usamos:

window.setTimeout(função, TempoEmMilissegundos); 

Para rodar uma mesma função durante um intervalo de tempo determinado usamos:

window.setInterval(função,  TempoEmMilissegundos);

Para parar o intervalo iniciado através da função setInterval usamos:

window.clearInterval(IdDoIntervalo);

Vamos criar um exemplo para um melhor entendimento, primeiro vamos criar uma pagina com os botões para nos auxiliar nas chamadas das funções. OBS: no final colocarei o código completo.

<html>
<body>

<input type="button" value="Iniciar em 3s" onclick="inicar(3)">
<br><br>
<input type="button" value="Rodar a cada 5s" onclick="inicarIntervalo(5)">
<input type="button" value="Parar o processo de 5s" onclick="pararIntervalo()">

</body>
</html>

Observe que cada botão está chamando uma função em Javascript no evento ONCLICK, teremos que criar essas funções. Para facilitar usaremos nos parâmetros de tempo os valores em segundos e depois multiplacaremos por 1000:

Antes de começar vamos criar a função que será executada durante os intervalos de nossos testes, essa função simplesmente irá mostrar um alerta com o texto ‘Rodar Alerta’

function mostrarAlerta(){
	 alert('Rodar Alerta');
}

Agora vamos para a primeira função de nosso primeiro botão. Iremos rodar a função criada anteriormente mostrarAlerta no intervalo que passarmos de parâmetro, em nosso caso temos o evento onclick=”inicar(3)” no botão,onde estamos passando o valor 3 de parametro, portanto nosso alerta será mostrado em 3 segundos após o click:

function inicar(tempoSegundos){
  window.setTimeout(mostrarAlerta, tempoSegundos * 1000);
}

Vamos criar a função que será executada durante um determinado período, ela segue o mesmo entendimento anterior, mas nesse caso vamos criar uma variável para armazenar o intervalo de tempo, e usaremos essa variável na próxima função. Como em nosso segundo botão o evento onclick=”inicarIntervalo(5)” está passando o valor 5, nosso alerta irá rodar a cada 5 segundos.

var Intervalo;
function inicarIntervalo(tempoSegundos){
	Intervalo = window.setInterval(mostrarAlerta,  tempoSegundos * 1000);
}

Por fim iremos criar a função que para nosso intervalo anterior, usando de parâmetro a variável anterior.

function pararIntervalo(){
	window.clearInterval(Intervalo);
}

No final criei um arquivo chamado teste.html com o conteúdo.

<html>
<body>

<script>

function inicar(tempoSegundos){

	window.setTimeout(mostrarAlerta, tempoSegundos * 1000);
}


var Intervalo;
function inicarIntervalo(tempoSegundos){
	Intervalo = window.setInterval(mostrarAlerta,  tempoSegundos * 1000);
}

function pararIntervalo(){
	window.clearInterval(Intervalo);

}


function mostrarAlerta(){
	 alert('Rodar Alerta');
}


</script>



<input type="button" value="Iniciar em 3s" onclick="inicar(3)">
<br><br>
<input type="button" value="Rodar a cada 5s" onclick="inicarIntervalo(5)">
<input type="button" value="Parar o processo de 5s" onclick="pararIntervalo()">


</body>
</html>

Agora abra o arquivo e faça alguns testes.

Para quem está usando esses comandos com prototype ou em formato de classe no javascript, para nao perder o escopo da variável interval deve ser usado dessa maneira

CountDown.prototype.start = function()
{
	var aux_this = this;
	this.interval = setInterval(function(){var a=aux_this.minhaFuncao(); }, 1000);

}

3 comentários em “setTimeout() , setInterval() e clearInterval() !

  • 27 de outubro de 2014 em 12:42
    Permalink

    Gostaria de saber como eu poderia ajustar essa função para que seja impressa imagens ao invés de alertas e sem a necessidade de acionar um evento através de um botão.

    Resposta
  • 27 de outubro de 2014 em 13:00
    Permalink

    Para ajudá-lo melhor, preciso entender a funcionalidade que você quer criar…

    Esses comandos são para repetir algum processo durante algum período… Para inicar sem a necessidade de um botão basta coloca-lo no onLoad do body como explica o link abaixo

    http://www.w3schools.com/jsref/event_onload.asp

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blue Captcha Image
Atualizar

*

Facebook

Get the Facebook Likebox Slider Pro for WordPress
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera