Minicursos - Javascript

clearInterval


Ainda sobre funções de manipulação de tempo, é preciso falar sobre a clearInterval, que tem o papel de interromper o comando setInterval. Isso lhe dará ainda mais liberdade para explorar as funções desses comandos, pois você pode executar repetidamente uma função, mas depois de um tempo fazê-la parar. A forma de realizar isso é simples. É importante destacar que a função setInterval retorna sempre um valor inteiro, que é o ID da execução, ou seja, seu número único de identificação, da seguinte forma:

var id = setInterval("alert('Olá!')", 2000);

Dessa forma colocamos, na variável id, o valor identificador dessa função. Se você criar várias funções manipuladoras de tempo, cada uma terá um id diferente.

Então, para interrompermos a função, usaremos o clearInterval, da seguinte forma:

function parar()
{
clearInterval(id);
}

Basta chamarmos a função clearInterval e passarmos, como único argumento, a variável id, que recebeu, no início do nosso exemplo, o identificador da função que queremos interromper.

Vou criar um botão que chama essa função e outro que a interrompe, vejam como vai ficar o código:

<form id="form">
<input type="button" id="botao" value="Iniciar" onclick="iniciar();"/>

<input type="button" id="botao" value="Parar" onclick="parar();"/>
</form>

E nosso JavaScript completo ficará assim:

<script type="text/javascript">
var id;
function iniciar() {
id = setInterval("alert('Olá!')", 2000);
}

function parar() {
clearInterval(id);
}
</script>

Vou executar essa página:

ClearInterval JavaScript

Clicando no botão Iniciar, disparamos a função que exibe o alerta a cada 2 segundos:

ClearInterval JavaScript

Então, clico no botão Parar e a execução dessa função é interrompida imediatamente.

Isso é interessante, mas podemos abrir ainda mais o leque de possibilidades se conseguirmos definir um código que se desligue sem a interação do usuário, ou seja, que faça a interrupção automática de algum código já em execução. Isso é possível utilizando uma função que também já vimos, que é a setTimeout. Vejam que a alteração no código é bem pequena, mas funciona perfeitamente.

Nosso JavaScript agora ficará dessa forma:

Alterar imagem automaticamente - JavaScript

Dessa forma a mensagem será exibida 4 vezes, então antes da quinta execução, que aconteceria após 10 segundos, a função parar será automaticamente chamada e interromperá esse ciclo. Dessa forma podemos criar códigos que fazem auto execução quantas vezes quisermos.



Algumas notícias

Como conversar com alguém no WhatsApp sem adicionar o número aos contatos

Este processo pode, à primeira vista, parecer um pouco confuso para usuários que não são muito experientes usando seu smartphone. Mas uma vez que você conclua o processo , vai entender o método e parecerá mais fácil. 1. Abra o seu navegador preferido no seu smartphone e digite o seguinte link na...

Ler Notícia Completa

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa
Você gostará destes vídeos: