Code - Liga e desliga contador
Código em JavaScript que liga e desliga um contador com setInterval().

Este é um exemplo da utilização da função interna setInterval() de JavaScript.

A idéia é termos 2 botões (start e stop) para iniciar e para a contagem. O resultado é exibido na textbox denominada display.

A “mágica” toda está na função setInterval(callback, milesegundos), ela recebe uma função de callback que será executada em um intervalo de n milesegundos. A cada iteração a função de callback será executada indefinidamente é como se fosse um função recursiva. A função setInterval retorna um identificar que nos é muito útil quando queremos para a animação, para tal utilizamos a função clearInterval(identificador), exemplo:

// iniciar a animação
var identificador = setInterval(callback, 1000);
// parar a animação
clearInterval(identificador);

É o que estamos fazendo com a variável id.

See the Pen Liga e desliga contador by Flávio Micheletti (@flaviomicheletti) on CodePen.

Um porém é que, ao executarmos clearInterval() ele apenas interrompe a execução mas o valor da variável identificadora continua sendo válido (true). Precisamos atribuir null explicitamente para anular o valor da variável.

Você deve ter reparado na estrutura if do botão “Start count!”…

if(!id) {
  // A mágica...
    ...
    ...
    ...
}

…ele evita que a animação seja novamente inicializada uma vez que ela já esteja rodando.

Quanto aos botões, vale comentar que estamos anexando os eventos através da propriedade onclick, fiz isso para manter o exemplo didaticamente simples, mas deveríamos estar utilizando receptores de eventos.