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

Xiaomi vende 52,9 milhões de celulares no segundo trimestre de 2021 e faturamento dispara

A gigante chinesa Xiaomi registrou um aumento de quase 85% no seu faturamento no segundo trimestre de 2021 em comparação ao mesmo período do ano passado. A receita divulgada pela empresa foi de 13,5 bilhões de dólares (algo em torno de 70 bilhões de reais) nos meses de abril a junho deste ano...

Ler Notícia Completa

Galaxy S9 e Galaxy S9 Plus receberão atualização de segurança este mês

A Samsung começou a liberar esta semana, para proprietários dos modelos Galaxy S9 e Galaxy S9 Plus, uma nova atualização de segurança. Por enquanto somente alguns países da Europa receberam o pacote, que deve ser dis...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!