Entrar Ainda não tem acesso?
1
resposta

temporizador considera o valor inicial do span inves do valor puxado pela requisição

Referente ao curso jQuery: avance na biblioteca mais popular do mercado parte 2, no capítulo Buscando frases via Ajax e atividade Arrumando tempo e texto

por gabriel eduardo siqueira gomes
| 60.8k xp | 20 posts

O valor no campo #tempo-digitacao atualiza, mas quando inicia o jogo ele decresce a partir do valor inicial.

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
        $("#botao-reiniciar").attr("disabled", true);                 /*bloqueia o botao reiniciar quando campo está em focus*/

        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                clearInterval(cronometroID);
                finalizaJogo();
            }
        }, 1000);
    });
}

function atualizaTempoInicial(tempo){
    var tempoInicial = $("#tempo-digitacao");
    tempoInicial.text(tempo);
}

/*------------------------------------------------*/

function trocaFraseAleatoria(data) {
    var frase = $(".frase");
    var IndiceAleatorio = Math.floor(Math.random() * data.length);
    frase.text(data[IndiceAleatorio].texto);
    atualizaTempoInicial(data[IndiceAleatorio].tempo);
    atualizaTamanhoFrase();

}
1 resposta
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Gabriel, tudo bem?

Desculpe a demora em te responder!

O problema que você mencionou está relacionado ao fato da variável tempoRestante estar fora da função one focus, sendo baseada no tempo inicial informado no corpo do documento HTML. Isso faz com que mesmo que o tempo inicial seja alterado no <span>, a contagem regressiva force o tempo para atender ao valor inicial. Por exemplo, se o tempo inicial é de 3 segundo, mesmo que o tempo para escrever a frase altere para outros valores, a contagem regressiva ainda irá se basear em 3 segundos.

Podemos solucionar este problema, alterando o escopo dessa variável e escrevendo-o dentro da função one focus de modo que o tempo irá seguir o valor de tempo informado no campo <span>. Desse modo o código seria escrito da seguinte maneira:

function inicializaCronometro() {
    campo.one("focus", function() {
        var tempoRestante = $("#tempo-digitacao").text();
        $("#botao-reiniciar").attr("disabled", true);

        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                clearInterval(cronometroID);
                finalizaJogo();
            }
        }, 1000);
    });
}

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

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