1
resposta

Função 'setTimeout' como alternativa para 'onkeydown/ onkeyup'

Bom dia.

Após acompanhar o curso decidi realizar o mesmo processo da instrutora, porém fiz uma pequena alteração que me pareceu poupar um certo trabalho além do código ficar mais reduzido.

Acontece que ao invés de utilizar 'onkeydown' e 'onkeyup', eu mantive a adição e remoção da classe ainda no evento 'onclick', adicionando um setTimeout para remover a classe ativa com um intervalo de tempo de 0,1s.

tecla.onclick = function() { TocarSom(idAudio); tecla.classList.add('ativa'); setTimeout(() => { tecla.classList.remove('ativa'); }, 100); }

function TocarSom(idElementAudio) {
    const audio = document.querySelector(idElementAudio);

    if (audio != null && audio.localName === 'audio') {
        audio.play();
    }
    else {
        alert ('Elemento não encontrado ou seletor inválido');
    }
}

for (let i = 0; i < buttons.length; i++) {
    const tecla = buttons[i];
    const classBtn = tecla.classList[1];

    const idAudio = `#som_${classBtn}`;

    tecla.onclick = function() {
        TocarSom(idAudio);
        tecla.classList.add('ativa');
        setTimeout(() => {
           tecla.classList.remove('ativa'); 
        }, 100);
    }
}

O código me pareceu funcionar bem semelhante ao da instrutora, mas gostaria de saber se existem boas práticas ou algo nesse sentido que informe não ser muito bom utilizar esse tipo de alternativa ou qual impacto poderia ser gerado utilizando o código dessa forma.

Obrigado.

1 resposta

Oi Vinicius, tudo bem?

Desculpe a demora em responder!

Há várias formas de executar um mesmo código e utilizar o setTimeOut() é uma delas. Por meio dele definimos um cronômetro que executa uma função ou trecho de código especificado assim que o cronômetro expira, no seu caso, a função que remove a classe ativa.

Não há nenhuma contraindicação em utilizar este comando, apenas é necessário manter o código claro para outras pessoas que podem ter acesso a ele e para você mesmo futuramente.

Dito isso, gostaria de te parabenizar por explorar novas opções e agradecer por compartilhar seu código com a comunidade do fórum, tenho certeza que vai ajudar muitos alunos e alunas que estão buscando outras alternativas para o código proposto neste curso.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição!

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!