Stopwatch using Javascript

Question

I have the following code, the timer works, but when it comes to the end it shows END and restarts. I wanted it to stop in the message END.

var tempo = new Number();
// Tempo em segundos
tempo = 10;

function startCountdown(){

// Se o tempo não for zerado
if((tempo - 1) >= 0){

    // Pega a parte inteira dos minutos
    var min = parseInt(tempo/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;
    }

    // Cria a variável para formatar no estilo hora/cronômetro
    horaImprimivel = min + ':' + seg;
    //JQuery pra setar o valor
    $("#tempo").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
} else {
    if (tempo == 0){
    fim = "FIM";
    $("#tempo").html(fim);
    }
}

}

// Chama a função ao carregar a tela
startCountdown();

Answer 1

I just entered a boolean control in the code to identify whether it finished the process or not, creating the variable done. This variable is always checked at the beginning of the counter.

var tempo = new Number();
// Tempo em segundos
tempo = 10;
done = false;

function startCountdown() {

  // Se o tempo não for zerado
  if ((tempo - 1) >= 0 && done == false) {

    // Pega a parte inteira dos minutos
    var min = parseInt(tempo / 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;
    }

    // Cria a variável para formatar no estilo hora/cronômetro
    horaImprimivel = min + ':' + seg;
    //JQuery pra setar o valor
    $("#tempo").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
  } else {
    if (tempo == 0) {
      done = true;
      fim = "FIM";
      $("#tempo").html(fim);
    }
  }

}

Answer 2

You could use the statement return, you’ve heard of?

Definition: The javascript Return statement terminates the execution of the function and returns the value for each function. If the value is omitted, it will be returned Undefined. Source: https://www.w3.org

In this case, when entering your Else and set the value "END" for your variable time you could add the Return statement to stop the execution as you wish.

The stretch code would look like this:

. . . else {
    if (tempo == 0){
    fim = "FIM";
    $("#tempo").html(fim);
    return;
    }
}