Stopwatch running from the first second

Asked

Viewed 532 times

2

Guys I found this code in a forum, I made some modifications only I do not know why the script is only running after 1 second, for example... it works normal updating after 1s, only it does not show the first second, understand? the printage of the values on the screen comes after the first second... It seems simple thing, only that I’m not very good in JS, fucei fucei and could not make funfa as I want!

Detail: You need jquery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var tempo = new Number();

// Tempo em segundos

tempo = 86400;

function startCountdown(){

// Se o tempo não for zerado

if((tempo - 1) >= 0){

// Pega a parte inteira dos minutos

var min = parseInt(tempo/60);

// horas, pega a parte inteira dos minutos
var hor = parseInt(min/60);

//atualiza a variável minutos obtendo o tempo restante dos minutos
min = min % 60;

// Calcula os segundos restantes
var seg = tempo%60;

// Formata o número menor que dez, ex: 08, 07, ...

if(min < 10){
min = "0"+min;

min = min.substr(0, 2);

}

if(seg <=9){
seg = "0"+seg;

}

if(hor <=9){
hor = "0"+hor;
}

// Cria a variável para formatar no estilo hora/cronômetro

horaImprimivel = hor+':' + min + ':' + seg;

//JQuery pra setar o valor

$("#sessao").html(horaImprimivel);

// Define que a função será executada novamente em 1000ms = 1 segundo

setTimeout('startCountdown()',1000);

// diminui o tempo

tempo--;

// Quando o contador chegar a zero faz esta ação

}
}

// Chama a função ao carregar a tela

startCountdown();
</script>
</head>
<body>
<span id='sessao'></span>
</body>
</html>

javascript jquery countdown

  • I did not understand. It is a Countdown of 1 in 1 second, soon when rotating the function, will start after 1 second. It seems to me everything normal. What you’d expect to happen?

  • Well, it’s just that I have a counting function via ajax and just when I update the page it already printa and leaves doing the counting in real time, I expected the same from this function, as she said yes do what she wanted, only from the 1 second, and understand that also it is scheduled to upgrade from 1 sec in 1 sec but what I would like to know is if there is any way I can already printout the first sec before the function wait 1 sec to start...

  • But already printa 24:00:00... then go down: 23:59:59...23:59:58 and so on.

  • What tin! here to me turns white and only appears after 1s the value 23:59:59 .... this is the complaint!

  • 1

    If you just test this code on a separate page, you will see that it works normal. What may be happening that you do not see the 24:00:00 is the context where you are using the function. It would be good to edit the question and put exactly where and how you are doing it, also because you say you have an Ajax in the middle, and this can influence the functioning of the count.

  • Hello I did the test here, I opened a new document with the semantics Html5 and nothing will edit the post to check exactly how it is!

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

2


The problem is that when executing the script the element #sessao has not yet been included in the DOM. Thus, in the first second the function did not find the element. After the first second the element has already been included the DOM and will print the time.

Include the code within the function $(function(){}); so that the script only starts when the DOM is ready.

And change the setTimeout to:

setTimeout(startCountdown,1000);

Without quotation marks and without quotation marks (), because the first argument already represents the function itself.

$(function(){

var tempo = new Number();

// Tempo em segundos

tempo = 86400;

function startCountdown(){

// Se o tempo não for zerado

if((tempo - 1) >= 0){

// Pega a parte inteira dos minutos

var min = parseInt(tempo/60);

// horas, pega a parte inteira dos minutos
var hor = parseInt(min/60);

//atualiza a variável minutos obtendo o tempo restante dos minutos
min = min % 60;

// Calcula os segundos restantes
var seg = tempo%60;

// Formata o número menor que dez, ex: 08, 07, ...

if(min < 10){
min = "0"+min;

min = min.substr(0, 2);

}

if(seg <=9){
seg = "0"+seg;

}

if(hor <=9){
hor = "0"+hor;
}

// Cria a variável para formatar no estilo hora/cronômetro

horaImprimivel = hor+':' + min + ':' + seg;

//JQuery pra setar o valor

$("#sessao").html(horaImprimivel);

// Define que a função será executada novamente em 1000ms = 1 segundo

setTimeout(startCountdown,1000);

// diminui o tempo

tempo--;

// Quando o contador chegar a zero faz esta ação

}
}

// Chama a função ao carregar a tela

startCountdown();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sessao"></div>

  • Working wonderfully! Thank you very much.

Browser other questions tagged javascript jquery countdown

You are not signed in. Login or sign up in order to post.