Entrar Ainda não tem acesso?
1
resposta

[Bug] Fiz o desafio mas está travando o navegador as vezes

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Sorteador de números e atividade Botão de reiniciar

por Matheus Cruz
| 180.7k xp | 27 posts

Olá, tudo bem? Espero que sim ':) Eu desenvolvi o projeto sozinho e ta funcionando muito bem, mas de vez em quando da umas travadas. Alguém poderia me dar uma bola? Queria saber se tem algo errado ou que pode deixar o código mais dinamico. Desde já, obrigado! vou deixar abaixo o arquivo app.js, o link do repositorio e o link do projeto online.

repositorio: https://github.com/rlxmts/desafio-logica link do projeto online: https://rlxmts.github.io/desafio-logica/

código do app.js

const campoQntDeNum = document.querySelector('#quantidade');
const campoNumMin = document.querySelector('#de');
const numeroMaximo = document.querySelector('#ate');
const resultado = document.querySelector('#resultado label');
let listaDeNumerosSorteados = [];

function gerarNumero(){
    return parseInt( Math.random() * numeroMaximo.value + 1)
}

function sortear(){

   while(listaDeNumerosSorteados.length != campoQntDeNum.value ){        
        let numeroSorteado = gerarNumero();       
        gerarNumero();
        if(numeroSorteado < campoNumMin.value || listaDeNumerosSorteados.includes(numeroSorteado)){
            gerarNumero();
        }else{
            listaDeNumerosSorteados.push(numeroSorteado);
            resultado.innerText = `Números sorteados: ${listaDeNumerosSorteados}`;
        }
   }    
    alterarBotao();
}

function reiniciar(){
    limparCampos(campoNumMin);
    limparCampos(numeroMaximo);
    limparCampos(campoQntDeNum);
    alterarBotao();
    resultado.innerText = `Números sorteados:  nenhum até agora`;
}

function limparCampos(elemento){
    elemento.value = '';
}

function alterarBotao(){
    const btReiniciar = document.querySelector('#btn-reiniciar');
    btReiniciar.className = btReiniciar.className === "container__botao-desabilitado" ? "container__botao" : "container__botao-desabilitado";
}
1 resposta
por Rodrigo da Silva Ferreira Caneppele
| 4932.4k xp | 8614 posts
Instrutor Instrutor

Olá, Matheus! Espero que esteja tudo bem com você também.

Pelo que percebi, o seu código está quase perfeito, mas parece que tem um pequeno problema que pode estar causando as travadas no navegador.

No seu código, dentro da função sortear(), você está chamando a função gerarNumero(); duas vezes sem necessidade. Além disso, quando o número sorteado é menor que o valor mínimo ou já existe na lista de números sorteados, você chama a função gerarNumero(); novamente, mas não faz nada com o número gerado. Isso pode estar causando um loop infinito em alguns casos, o que trava o navegador.

Aqui está a parte do seu código onde isso acontece:

function sortear(){
   while(listaDeNumerosSorteados.length != campoQntDeNum.value ){        
        let numeroSorteado = gerarNumero();       
        gerarNumero(); // chamada desnecessária
        if(numeroSorteado < campoNumMin.value || listaDeNumerosSorteados.includes(numeroSorteado)){
            gerarNumero(); // você gera um número, mas não faz nada com ele
        }else{
            listaDeNumerosSorteados.push(numeroSorteado);
            resultado.innerText = `Números sorteados: ${listaDeNumerosSorteados}`;
        }
   }    
    alterarBotao();
}

Aqui está uma versão corrigida:

function sortear(){
   while(listaDeNumerosSorteados.length != campoQntDeNum.value ){        
        let numeroSorteado = gerarNumero();       
        while(numeroSorteado < campoNumMin.value || listaDeNumerosSorteados.includes(numeroSorteado)){
            numeroSorteado = gerarNumero();
        }
        listaDeNumerosSorteados.push(numeroSorteado);
        resultado.innerText = `Números sorteados: ${listaDeNumerosSorteados}`;
   }    
    alterarBotao();
}

Nessa versão corrigida, a função gerarNumero(); só é chamada quando realmente é necessário e o número gerado é sempre usado.

Espero ter ajudado e bons estudos!