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.

var btnStart = document.getElementById('btn-start');
var btnStop  = document.getElementById('btn-stop');
var display  = document.getElementById('display');
var id       = null;

btnStart.onclick = function() { // A animação não será reiniciada caso // já tenha sido iniciada if(!id) { // A mágica... id = setInterval(function () { display.value = Number(display.value) + 1; }, 100);
} } btnStop.onclick = function() { // Desliga a animação mas // o valor de id continua sendo válido (true) clearInterval(id); // Anulamos o valor da variável id, // é como se ela fosse uma variável de controle id = null; }

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.

Comentários

comments powered by Disqus