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](/javascript/if-else/) do botão "Start count!"... ```javascript 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](/javascript/tratando-eventos/).

Navegue nesta série!


Comentários

comments powered by Disqus