2

Eu tava vendo um tutorial sobre um contador no site do devFuria e ele apresenta o código comentado aí abaixo.

    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 (comentário do tutorial)
     // já tenha sido iniciada (comentário do tutorial)


    //Minha dúvida está nesse trecho
    if(!id) {
    // A mágica... (comentário do tutorial)
    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) (comentário do tutorial)
      clearInterval(id);
      // Anulamos o valor da variável id,
      // é como se ela fosse uma variável de controle (comentário do tutorial)
      id = null;
    }

No trecho de código onde tem o (!id), ele afirma que isso aí é que vai impedir que o contador reinicie a contagem caso já tenha sido iniciada. Eu não entendi a lógica de criar uma variável id = null e de usar, no if, o (!id) pra começar a contagem. E por que eu tenho que setar null no id ao usar o clearInterval no final?

2 Respostas 2

2

Primeiro de tudo para você entender o fluxo da um console log no id e vê oque ele retorna na função está passando um !id esse simbolo ! e referenciado por negação então ficaria se não tiver um id = !id console.log(id) Referente a:

 if(!id) {
    // A mágica... (comentário do tutorial)
    id = setInterval(function () {
      display.value = Number(display.value) + 1;
    }, 100);    
  }

Referente a :

  clearInterval(id);
  // Anulamos o valor da variável id,
  // é como se ela fosse uma variável de controle (comentário do tutorial)
  id = null;

é necessário criar a variável id porque no clearInterval você está chamando um id clearInterval(id);

se você não declara o id como null, o console vai te xingar por você não ter declado a variável eu preciso para que eu possa consumir uma variavel na minha função ela tem que estar declarada então se vc passar um id=null, ou id=0 vai da na mesma está iniciando em 0 ou null, mais lembre-se sempre se eu for consumir uma variável ela tem que estar declarada.

1
  • 1
    Bom dia, Victor, obrigado pela ajuda. Tava olhando outras respostas no stackoverflow sobre null e undefined no JavaScript e li a seguinte explicação: "null e undefined são valores falsey, ou seja, são convertidos para false quando forçados para booleanos." Então penso que o if (!id) tá esperando um resultado true - por isso a exclamação -, já que por ser falsey, por padrão, ele retorna false. Quanto ao id = null no clearInterval, entendi a sua explicação, obrigado. Mas ainda estou a tentar entender o resto do código rsrsrsrs. Commented 3/01/2020 às 13:59
1

Imagino que, essencialmente, sua dúvida está em um conceito específico do javascript: valores verdadeiros e falsos. Os termos mais utilizados para defini-los são truthy e falsy, em inglês.

É importante entender a diferença entre os valores booleanos true e false e valores verdadeiros e falsos:

Qualquer valor verdadeiro será considerado true quando utilizando em condições e valores falsos serão considerados false. Esta documentação da MDN pode te ajudar a entender sobre valores falsos.

Qualquer um dos valores seguinte é falso:

  • false
  • null
  • undefined
  • 0
  • "" (string vazia)
  • NaN (Not a number)

Isto que significa que, enquanto id for null a condição !id é verdadeira, já que a negação de um valor falso é true.

A função setInterval retorna um inteiro (não zero). Qualquer número inteiro diferente de zero é um valor verdadeiro. Ou seja, assim que id = setInterval(...); é executado, a condição !id é falsa. E isto garante que o contador será iniciado somente antes de setInterval ter sido chamada pela primeira vez.

Mas, por que o trecho id = null é necessário após clearInterval(id)? A função clearInterval não altera o valor de id, logo, esta variável continua com o valor inteiro diferente de zero (ou seja, um valor verdadeiro). Para permitir que o código dentro do if(!id) seja executado novamente, precisamos dar um valor falso a id (neste caso, null).

Acredito que algumas pequenas alterações facilitam a compreensão do comportamento do contador:

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

btnStart.onclick = function() {
  // A animação não será reiniciada caso (comentário do tutorial)
  // já tenha sido iniciada (comentário do tutorial)


  //Minha dúvida está nesse trecho
  if(!isRunning) {
    // A mágica... (comentário do tutorial)
    id = setInterval(function () {
      display.value = Number(display.value) + 1;
    }, 100);
    isRunning = true; // A animação continuara ate isRunning receber false
  }
}

btnStop.onclick = function() {
  // Desliga a animação mas
  // o valor de `id` continua sendo válido (true) (comentário do tutorial)
  clearInterval(id);
  // Anulamos o valor da variável id,
  // é como se ela fosse uma variável de controle (comentário do tutorial)
  isRunning = false; // A animação ficara parada ate isRunning receber true
}

Um último comentário: o que o Victor comentou sobre a variável precisar ser iniciada (ou o console irá reclamar), de fato ocorre. Isto é uma precaução proveniente do histórico da computação. Quando um variável é declarada, um espaço da memória do computador é reservado para esta variável, porém nem sempre este espaço estava vazio antes de ser utilizado. Algumas linguagens (como C, por exemplo) não "limpam" este espaço antes de dá-lo à variável, portanto o valor inicial de uma variável pode ser imprevisível se não for explicitamente determinado. Para evitar problemas decorrentes de valores iniciais inesperados em variáveis tornou-se uma boa prática de programação sempre dar valores iniciais (Zero é um valor comum para variáveis numéricas, por exemplo).

No caso do javascript, mais especificamente, esse aviso do console ocorre para dificultar o acesso a variáveis não definidas (undefined), uma vez que este tipo de acesso causa erros.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .