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:
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:
<input type="button" id="botao" value="Iniciar" onclick="iniciar();"/>
<input type="button" id="botao" value="Parar" onclick="parar();"/>
E nosso JavaScript completo ficará assim:
id = setInterval("alert('Olá!')", 2000);
Vou executar essa página:
Clicando no botão Iniciar, disparamos a função que exibe o alerta a cada 2 segundos:
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:
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.