[Dúvida] Deveria me importar com estas coisas?

estou fazendo o projeto da logica e programação:
vi que ha algo que me incomoda quando vou CHUTAR um numero o exemplo
1 - o numero secreto é maior e se coloco 2 depois e o numero continua ssendo maior a Tela nao atualiza e parece congelada. Ai tentei arrumar isto que me incomodou queria saber se esta certo pq acabei interrompendo o projeto para pesquisar e estudar como arrumar este errinho e com ajuda da Lura consegui arrumar mas no curso eu ainda não tinha aprendido esta funcao de setTimeout, enfim queria saber se isso pode ser um problema enao deveria me importar com este tipo de coisas.

let numeroSecreto = gerarNumeroAleatorio();

function exibirTextoNaTela(tag, texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto;
}

exibirTextoNaTela('h1', 'Jogo do número secreto');
exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');

function gerarNumeroAleatorio() {
return parseInt(Math.random() * 10 + 1);
}

Olá Mickel.
Tudo bem?
Duvidas e cometer erros são bem comuns quando aprendemos algo novo.
O importante é entender o que está acontecendo,buscar soluções e corrigir.
Vamos lá...
O mais importante aqui é entender por que a tela parecia “congelada”.
Quando você fazia:

exibirTextoNaTela('p', '');

e logo depois:

exibirTextoNaTela('p', 'O número secreto é maior');

o navegador praticamente não tinha tempo de “mostrar” o texto vazio antes de trocar novamente.
Tudo acontecia rápido demais.
Ao usar:

setTimeout(function() {
   ...
}, 200);

você deu um pequeno intervalo para o navegador atualizar a tela antes de exibir a nova mensagem.
Então sim, sua lógica faz sentido.
Mas existe um detalhe importante: no contexto do curso, talvez o objetivo ainda não fosse trabalhar com temporização (setTimeout).
Então sua solução está válida tecnicamente, só ficou um pouco mais avançada do que o conteúdo esperado naquele momento.
Também vale observar que esse “efeito congelado” provavelmente acontece porque o texto novo é igual ao anterior:

Você digitou 1 - “o número secreto é maior”
Depois digitou 2 - continua “o número secreto é maior”

Como a mensagem não mudou, visualmente parece que nada aconteceu.
Uma alternativa mais simples seria atualizar outros elementos da interface, por exemplo:

exibirTextoNaTela('p', `Você chutou ${chute}. O número secreto é maior`);

Assim o texto muda toda vez sem precisar de setTimeout.
Outro ponto importante: seu código parece ter um pequeno problema de fechamento de chaves {}.
A função verificarChute() provavelmente não foi fechada antes de gerarNumeroAleatorio().
Ficaria algo assim:

function verificarChute() {
    let chute = document.querySelector('input').value;

    if (chute == numeroSecreto){
        exibirTextoNaTela('h1' , 'Acertou');
        exibirTextoNaTela('p' , 'Você descobriu o Número secreto!');
    } else {

        exibirTextoNaTela('p' , '');

        setTimeout(function(){

            if (chute > numeroSecreto){
                exibirTextoNaTela('p' , 'O número secreto é menor');
            } else {
                exibirTextoNaTela('p' , 'O número secreto é maior');
            }

        }, 200);
    }
}

Então resumindo:

Você não fez errado.
Pesquisar além do curso é excelente.
Sua solução funciona.
Só é importante também entender o motivo do comportamento.
E às vezes existe uma solução mais simples para o mesmo problema.

Essa curiosidade de “quero melhorar mesmo antes de aprender oficialmente” é algo muito comum em quem evolui rápido em programação.
Continue evoluindo e compartilhando seu aprendizado.
Bons estudos.

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema