1
resposta

setInterval

Oi gente, tudo certo? Eu tinha pensado em uma resolução um pouco mais complicada do que a do Flávio (^^; E usei o 'setInterval' dentro de um 'while', segue o código:

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

<script type="text/javascript">

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

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

    function limpaTela()
    {
        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 20;

    var ida = true;

    var volta = false;

    var x2 = 580;

    function atualizaTela()
    {
        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++;
    }

    function daVolta()
    {
        limpaTela();
        desenhaCirculo(x2, 20, 10);
        x2--;
    }


    while (ida = true) 
    {
        setInterval(atualizaTela, 10);
        if(x==580)
        {
            ida = false;
            volta = true;
            x = 20;
            break;
        }
    }

    while (volta = true)
    {
        setInterval(daVolta, 10);
        if(x2 == 20)
        {
            volta = false;
            ida = true;
            x2 = 600;
            break;
        }
    }    

</script>

O meu código não funcionou por erros da minha parte ou é por causa de alguma propriedade do 'setInterval'?

1 resposta

Olá, Fabiana! Espero que esteja tudo bem

Desculpe a demora em dar um retorno

Vemos que está gerando um looping infinito não pelo setInterval mas pelo while estar em constante valor, recebendo true ou false e não alterando

O que vale fazermos é um debbug para vermos o comportamento desse while e até mesmo colocar dentro de um único while

Tente executar essa alteração e nos retorne para sabermos se deu tudo certo!

Um abraço e bons estudos