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

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

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

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