Mostrar bandeira por N segundos

Oi Elton.

Você terá que cancelar um timer e iniciar outro com um tempo diferente. Como o curso é de lógica e foca o mínimo possível de JavaScript essa parte já entra em detalhes da linguagem e não de lógica por demandar conhecimento específico da linguagem.

Porém a boa notícia é que há cursos na Alura que focam exclusivamente em JavaScript. O conhecimento de High order function é necessário.

Todavia se quiser quebrar a cabeça estude sobre clearInterval e clearTimeout. São elas que recebem o id de um timer permitindo para-lo. Quando parar um timer inicie outro com um valor diferente.

Sobre a API

https://www.w3schools.com/jsref/met_win_cleartimeout.asp

Pegou o conceito da solução?

Sucesso e bom estudo.

Uma solução mais fácil (nao precisará das funções que citei) você chamar o timer diferente no final do outro com setTimeout e ficar nesse processo cíclico. Mas para isso você precisa saber sobre High order functions que funções podem ser tratadas como variáveis e itens de array. Aí a cada chamada você inverte a ordem do array usando a API reverse() do Array.

Obrigado Flavio.

Quer que eu implemente ou quer quebrar a cabeça ou deixar pra mais tarde?

Flavio, esta semana eu vou focalizar na finalização de outros cursos para terminar uma das trilhas.

Os cursos avançados de JavaScript eu farei mais para frente.

De qualquer forma, como a resposta envolverá funções avançadas, ficaria feliz se você implementasse uma solução.

Assim já mato a curiosidade do 7x1 :-)

Segue uma solução. Verifique a saída no console. Não há funções avançadas, é padrão de JavaScript. Você aprende nos cursos antes dos avançados, mas não nos de lógica.

<script>
var funcoes  = [
    function() {

        setTimeout(function() {
            console.log("função de 1 segundos");
            funcoes.reverse();
            funcoes[0]();
        }, 1000);
    },
    function() {
        setTimeout(function() {
            console.log("função de 7 segundos");
            funcoes.reverse();
            funcoes[0]();
        }, 7000);
    }
];

funcoes[0]();
</script>

Sucesso e bom estudo meu aluno.

Agora sim, obrigado Flavio!

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

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

    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();
}

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);
}

var bandeira = [
    function() {
        setTimeout(function() {
            desenhaBandeiraAlemanha();
            bandeira.reverse();
            bandeira[0]();
        }, 1000);
    },
    function() {
        setTimeout(function() {
            desenhaBandeiraBrasil();
            bandeira.reverse();
            bandeira[0]();
        }, 7000);
    }
];
bandeira[0]();
</script>

Perfect! Só mudaria a variável bandeira para bandeiras no plural por que é um array.

Sucesso e bom estudo Elton!