uso de if em setInterval. | Lógica de programação | Alura

(Javascript) Estudando Lógica de programação II, recentemente aprendi sobre o setInterval, então, como eu aprendo muito mais "brincando" com a programação, fazendo minhas próprias ideias, eu queria que o setInterval funcionasse sobre uma condição, eu tentei usar o if, porém não deu certo.

<!-- bandeiras.html -->

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

<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');

var bandeiraAtual = 0;
var pressao = false;

function desenhaBandeiraBrasil() {
    pincel.fillStyle="green";
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle="yellow";
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle="darkblue";
    pincel.beginPath();

    pincel.arc(300, 200, 100, 0, 2* 3.14);
    pincel.fill();
    bandeiraAtual++;
}


function desenhaBandeiraAlemanha() {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 133);

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 133, 600, 133);

    pincel.fillStyle = 'yellow';
    pincel.fillRect(0, 266, 600, 133);
    bandeiraAtual--;
}

function desenhaBandeiras() {
    if(bandeiraAtual == 0) {
        desenhaBandeiraBrasil();
    } else if(bandeiraAtual == 1) {
        desenhaBandeiraAlemanha();
    }
}

function mouseApertado() {
    pressao = true;
}

function mouseSolto() {
    pressao = false;
}

tela.onmousedown = mouseApertado;
tela.onmouseup = mouseSolto;

desenhaBandeiraBrasil();

if(pressao == true) {
    setInterval(desenhaBandeiras, 300);
}

</script>

Olá Ian, tudo bem?

Pelo código que você postou, parece que a sua intenção é que a função desenhaBandeiras seja executada a cada 300 milissegundos, mas apenas se a variável pressao for igual a true.

O problema é que o seu setInterval está fora de qualquer função, então ele é executado apenas uma vez quando a página é carregada, sem levar em consideração a variável pressao.

Para resolver isso, você pode colocar o setInterval dentro da função mouseApertado, que é chamada quando o mouse é pressionado. Assim, o setInterval só será ativado quando o mouse for pressionado, e a função desenhaBandeiras será executada a cada 300 milissegundos enquanto o mouse estiver pressionado.

Ficaria assim:

function mouseApertado() {
    pressao = true;
    setInterval(desenhaBandeiras, 300);
}

function mouseSolto() {
    pressao = false;
}

Espero ter ajudado e bons estudos!