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.

Navegue nesta série!


Comentários

comments powered by Disqus