Dúvida no Ex. 1 da Aula 4 - Movendo elementos: animações simples

Ela não para até que explicitamente vc mande ela parar, fica basicamente em loop infinito mesmo. A função que a gente chama para parar o setInterval() é a clearInterval(), porém existe algo a mais que precisamos entender.

No exemplo da aula quando chamamos a função setInterval() não pedimos pra nenhuma variável armazenar o seu retorno, todavia essa função retorna um número que chamamos de Interval ID, que é o número identificador do intervalo. Esse número serve para que se quisermos parar aquele setInterval específico, usamos esse número para apontar pra ele.

Agora, pra gente entender como parar, vamos ver um exemplo de código.

// Nesse ponto a gente chama a função setInterval
var intervalID = setInterval(funcaoAleatoria, 30);

Beleza, para pararmos a execução temos que chamar o clear interval, repare aonde usamos o id do intervalo.

clearInterval(intervalID);

Mas enfim, é basicamente isso, espero ter te ajudado (: Abraços!

Olá Gustavo! Ótima pergunta a sua. Sim, é um problema estar em um loop infinito. Pois animação continuará ocorrendo infinitamente, no entanto, não veremos devido ao tamanho de nossa canvas. Mas é possível faze-la parar mesmo utilizando o setInterval() basta utilizarmos a função clearInterval() passando como parametro o id do método setInterval(). O id é obtido como retorno quando chamamos o setInterval(), então para obtê-lo basta atribuir a uma variável da seguinte forma:

var id = setInterval(animacao, 30);

E quando quisermos parar basta utilizarmos:

clearInterval(id);

No entanto, perceba que eu apenas estou ensinando o método que para o setInterval() . Cabe a você programador decidir quando você quer que pare, utilizando um click na tela ou em um botão, ou de forma mais simples como eu coloquei abaixo, após determinado tempo em milissegundo utilizando outro método o setTimeout()

que chama determinada função após determinado tempo em milissegundos. Veja só:

<canvas id="tela" width ="600" height = "400"></canvas>
<script>
var tela = document.getElementById("tela");
var p = tela.getContext("2d");
var x = 0;

var desenhaCirculo = function(x, y, raio){
    p.beginPath();
    p.fillStyle = "blue";
    p.arc(x, y, raio, 0, 2*Math.PI);
    p.fill();
}

var limpaTela = function(){
    p.clearRect(0, 0, 600, 400);
}

var animacao = function(){
    limpaTela();
    x++;
    desenhaCirculo(x, 200, 10)
}

var stop = function () {
    clearInterval(id);
}

var id = setInterval(animacao, 30);
setTimeout(stop, 3000);

</script>

Enfim, não existe só essa forma de fazer isso, como eu disse, depende do programador e apenas utilizei essa forma para você entender o uso.

Espero ter ajudado! Bons Estudos!

Muito obrigado pela ajuda, consegui entender perfeitamente como funciona, ótima explicação :) . Abraços

Obrigado Romário gostei do exemplo vou testa-lo aqui, ajudou sim, Abraços

Por nada Gustavo! Segue um exemplo com um botão, para você ver o uso:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval

Qualquer coisa estamos aqui para ajudar.

Nossa, tava com muita dúvida com relação a isso, ajudou bastante! :D