Velocidade do pulsar

Bom dia, meu xará! Como vai?

O setInterval() é executado apenas uma vez! E ao ser executado, cadastra a função atualizaTela() para ser executada a cada 0 milissegundos ( que é o valor inicial da variável velocidade ). Ou seja, para fazer o que vc deseja, o setInterval() não vai te ajudar!

Sendo assim, a título de desafio e como forma de exercitar o conteúdo aprendido, tente resolver esse pequeno mistério!

Qualquer coisa, se precisar de ajuda é só falar!

Grande abraço e bons estudos, meu aluno!

Grabiel Dorneles,

O setInterval() pode te ajudar sim !!!

Mas precisamos descobrir como "resetar" o valor do tempo.

Existe o método: clearInterval() que junto com o próprio setInterval() nos ajudarão na solução.

Primeiro, para podermos resetar ou alterar o valor do tempo, precisamos manter uma referência ao setInterval() , o que faremos com a variável setTempo .

 var setTempo = setInterval(atualizaTela, velocidade);

Note que, neste momento, a função setInterval() já foi chamada e está em execução;

Depois de acordo com o fatorCrescimento, limparemos o valor(com o clearInterval()) e definiremos a nova velocidade .

if(fatorCrescimento == 1) {
            clearInterval(setTempo); 
            velocidade = 2000; 

        } else if (fatorCrescimento == -1) {
            clearInterval(setTempo); 
            velocidade = 1000; 
        }

Feito isso, ainda dentro do métodoatualizaTela() , atualizamos a referência setTempo, da mesma forma que a inicializamos :

setTempo = setInterval(atualizaTela, velocidade);

o código completo ficou assim:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    var raio = 19;

    var fatorCrescimento = 0;

    var velocidade = 10;

    var setTempo = setInterval(atualizaTela, velocidade);

    function atualizaTela() {

        limpaTela();

        if(raio > 30) {
            fatorCrescimento = -1;
        } else if (raio < 20) {
            fatorCrescimento = 1;
        }

        raio = raio + fatorCrescimento;

        if(fatorCrescimento == 1) {
            clearInterval(setTempo); 
            velocidade = 2000; 

        } else if (fatorCrescimento == -1) {
            clearInterval(setTempo); 
            velocidade = 1000; 
        }

        desenhaCirculo(300, 300, raio, 'blue'); 

        console.log(velocidade); /*  verique no console do browser a alteração da velocidade */
        setTempo = setInterval(atualizaTela, velocidade); 
    }

</script>

Abraços, e bons estudos !

• Fontes para consulta e mais informações: *

  https://www.w3schools.com/js/js_timing.asp

  https://pt.stackoverflow.com/questions/101387/como-mudar-o-delay-do-setinterval-programaticamente

Opa, Gabriel e Marcus!

Apenas como forma de fazer uma retificação, o que eu quis dizer quando eu disse que "o setInterval() não ajudaria nesse caso" foi no sentido de que ele não funcionaria dessa forma como estava sendo imaginado!

Meu objetivo foi ser didático e orientar o Gabriel no sentido de encontrar a solução por si mesmo e com as "ferramentas" que ele mesmo já adquiriu durante o curso, sem sobrecarregar ele com coisas novas que nesse momento não são necessárias e que muitas vezes acabam assustando os alunos que estão iniciando a sua jornada no mundo da programação!

Grande abraço, pessoal! Bons estudos e sucesso a todos!

Opa, Sim Gabriel, entendi o seu ponto :) Obrigado a todos.

Por nada, meu xará! Sempre que tiver qualquer dúvida ou precisar de alguma ajuda é só mandar aqui no fórum da Alura!

Grande abraço e bons estudos, meu aluno!