1
resposta

[Dúvida] setinterval

Fiz como o professor fez mais ao clicar no ok não some a mensagem fica repetindo, alguém sabe me dizer onde estou errando?

const html = document.querySelector('html'); //seleciona o html
const focoBt = document.querySelector('.app__card-button--foco');//seleciona o botão foco
const curtoBt = document.querySelector('.app__card-button--curto');//seleciona o botrão curto
const longoBt = document.querySelector('.app__card-button--longo');//seleciona o botão descanso longo
const banner = document.querySelector('.app__image'); //seleciona as imagnes que tenho que trocar ao clicar nos botões
const titulo = document.querySelector('.app__title'); //selecionando os títulos do html
const botoes =document.querySelectorAll('.app__card-button'); //selecionando os botões no html
const startPauseBt = document.querySelector('#start-pause');//selecionando o botão começar no html através do id
const musicaFocoInput = document.querySelector('#alternar-musica');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
musica.loop = true;

let tempoDecorridoEmSegundos = 5;
let intervaloId = null;

musicaFocoInput.addEventListener('change', () => {
    if(musica.paused) {
        musica.play()
    } else {
        musica.pause()
    }
})

focoBt.addEventListener('click', () =>{
    /*html.setAttribute('data-contexto', 'foco');
    banner.setAttribute('src', '/imagens/foco.png'); // muda o atributo da imagem ao clicar*/
    alterarContexto('foco');
    focoBt.classList.add('active');
})//mudando atributo das páginas ao clicar no botão

curtoBt.addEventListener('click', () =>{
    alterarContexto('descanso-curto');
    curtoBt.classList.add('active');
})

longoBt.addEventListener('click', () =>{
    alterarContexto('descanso-longo');
    longoBt.classList.add('active');
})

function alterarContexto(contexto) {
    botoes.forEach(function (contexto){
        contexto.classList.remove('active');
})
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `/imagens/${contexto}.png`)
    switch (contexto) {
        case "foco":
            titulo.innerHTML = `
            Otimize sua produtividade,<br>  
            <strong class="app__title-strong">mergulhe no que importa.</strong>
            `
            
            break;
        case "descanso-curto":
            titulo.innerHTML = `
            Que tal dar uma respirada?<br> 
            <strong class="app__title-strong"> Faça uma pausa Curta</strong>
            ` 
            break;

        case "descanso-longo":
            titulo.innerHTML = `
            Hora de voltar à superfície.
             <strong class="app__title-strong"> Faça uma pausa longa</strong>
            `
            break;
        default:
            break;
    }
}

const contagemRegressiva = () => { //parando o temporizador quando chegar no 0.

    if(tempoDecorridoEmSegundos<=0){
        zerar();//chamando a função para zerar e retornar o intervalo em zero.
        alert('Tempo finalizado!');
        return; // para o temporizador
    }
    
    //decrementar o temporizador
    iniciar();//chamando a função para executar automatizado a contagem regressiva.
    tempoDecorridoEmSegundos -=1; //menor ou igual a 1 decrementando
    console.log('Temporizador: ' +tempoDecorridoEmSegundos);//concatenação = relacionamento, ligação de idéias. 
}

startPauseBt.addEventListener('click', contagemRegressiva);

function iniciar(){//função para decrementar
intervaloId = setInterval (contagemRegressiva, 1000); /* chamando a variável e utilizando o método setinterval para executar 
uma função ou código em determinado periodod e tempo. o setInterval recebe sempre dois parâmentros, o prrimeiro ser executado
a função contagem regressiva e o segundo com quanto tempo que quer que seja executado 1000 quer dizer 1 segundo, milesegundos.*/

}

function zerar() {//zerando a contagem regressiva
    clearInterval(intervaloId); // limpando o intervaloid
    intervaloId = null; //atribuindo null
}
1 resposta

Oi, Alexandre. Como vai?

O que acontece é que no addEventListener, você está chamando diretamente a função contagemRegressiva, quando na verdade deveria associar o evento à função iniciar, que controla o início e a pausa do temporizador. Isso pode ser ajustado da seguinte forma:

const contagemRegressiva = () => {
    if (tempoDecorridoEmSegundos <= 0) {
        zerar(); 
        alert('Tempo finalizado!'); 
        return; 
    }
    
    tempoDecorridoEmSegundos -= 1;
    console.log('Temporizador: ' + tempoDecorridoEmSegundos);
};

startPauseBt.addEventListener('click', iniciar);

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado