3
respostas

Ajuda com bug

Pois então, to entrando no ultimo capítulo do curso agora, nem ví video algum, porém estava testando algumas coisas diferentes e achei um bug em relação ao botão de reiniciar

Revisei meu código com o dado na aula para download e está o mesmo somente som nomes de variáreis diferentes.

Bug: No momento que eu foco no campo e o contador começa a reduzir o tempo, se eu spammar cliques no botao de reiniciar, o contador volta ao tempo inicial porém ele também mantem a contagem antiga e fica alternando, então quando a primeira contagem chega em , o campo trava mesmo mostrando que faltava sai la... 10 segundos.

Pensei em one click mas n faz sentido e tbm buga, e teria que dar refresh na page também...

Tem como meter um Clear interval no botão? pq daí ele n mantem a contagem anterior?

var campoDigitacao = $(".input-area");
var timeStart = $("#time-counter").text();

$(function() {
    contadorPalavras();
    contadorDigitacao();
    contaTempo();
    inicializaMarcadores();
    $("#reset").click(reiniciaJogo);
});

/* ----- Contador palavras base ------- */

function contadorPalavras(){

    var textoPrincipal = $("#main-text").text();

    var numPalavras = textoPrincipal.split(" ").length;

    var contador = $("#counter");

    contador.text(numPalavras);
}

/* ---- Contador de digitação--- */

function contadorDigitacao(){

    campoDigitacao.on("input", function(){ //aplica a funcao ao receber infop

        var content = campoDigitacao.val(); //atribui o valor do campo às uma variavel

        var numPal = content.split(/\w+/).length - 1;

        $(".word-count").text(numPal);

        var numChar = content.length;
        $(".char-count").text(numChar);

        palavrasSegundos();
    });
}

/* ------- contador de tempo -----*/

function contaTempo(){

    var timeLeft = $("#time-counter").text();

    campoDigitacao.one("focus", function(){

            var timeID = setInterval(function(){

                timeLeft--;

                $("#time-counter").text(timeLeft);

                if (timeLeft == 0) {

                    campoDigitacao.attr("disabled", true);
                    clearInterval(timeID);
                    $("#reset").attr("disabled", false);
                    campoDigitacao.addClass("input-cinza");
                    //campoDigitacao.toggleClass("input-cinza");// interruptor on/off
                }

        }, 1000);
    });
}

/* ------- Comparador de palavras -------*/

function inicializaMarcadores(){ 

    var frase = $("#main-text").text();
    console.log(frase);
    campoDigitacao.on("input", function(){

        var digitado = campoDigitacao.val();

        if (frase.startsWith(digitado)) {

            campoDigitacao.addClass("input-verde");
            campoDigitacao.removeClass("input-vermelho");
        }else {

            campoDigitacao.addClass("input-vermelho")
            campoDigitacao.removeClass("input-verde");
        }

    });
}

/* ---------- Botão reset ---------*/

function reiniciaJogo(){

    campoDigitacao.attr("disabled",false);    
    campoDigitacao.val("");
    $(".word-count").text("0");
    $(".char-count").text("0");
    $("#time-counter").text(timeStart);

    contaTempo();

    campoDigitacao.removeClass("input-cinza");
    campoDigitacao.removeClass("input-verde");
    campoDigitacao.removeClass("input-vermelho");
    //campoDigitacao.toggleClass("input-cinza"); //interruptor de classes on/off
}

/* ------ velocidade de digitação ----*/

function palavrasSegundos(){

    wordsPerSecond = $(".word-count").text()/timeStart;
    charPerSecond = $(".char-count").text()/timeStart;

    $(".wps").text(wordsPerSecond);
    $(".cps").text(charPerSecond);

}
3 respostas

Olá João Vitor !

Acho que segunda parte do curso de Jquery ele corrigi isso.

Posta o html do principal.html :)

A melhor coisa a se fazer é adicionar o atributo disabled atravez da função do jQuery:

$("#botaoReiniciar").attr("disabled", true);

(colocando como parametro 'true', você adiciona. Quando achar necessário, pela lógica do jogo, você retira:

$("#botaoReiniciar").attr("disabled", false);

Desse jeito você impede que o botão seja ativado durante o jogo, impossibilitando que esse bug ocorra

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software