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

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

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