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.