Temporizadores
A chaleira é um parágrafo, #pot. O script escreve cold. Aqui não há formulário nem sino da loja.
Um temporizador não pausa o script. A linha seguinte corre na hora. A função corre depois. Um prazo de 400 milissegundos escreve hot. Se o cancelares, a chaleira fica cold. Um intervalo conta 1, 2, 3 e para. A linha fica cold / hot / 3.
Não é o sino
A página anterior juntou same / 4 / undefined / number. Eram o documento, um var, um let e o tipo da largura. Esta página não os lê. cold e hot são palavras que o temporizador escreve na chaleira.
A pergunta nova: quando muda a palavra?
A linha seguinte não espera
setTimeout pede uma função e um atraso em milissegundos. 400 são quatro décimos de segundo, não 400 segundos. O registo por baixo da chamada corre primeiro, a chaleira ainda está cold. A função escreve hot e regista isso depois.
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);
O primeiro registo é cold. O seguinte é hot. O script não ficou sentado 400 milissegundos.
Cancela a fervura
setTimeout devolve um id. clearTimeout com esse id larga a função. A chaleira ficou cold e hot não chega.
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);
O registo é cold. A função foi largada, por isso a chaleira não fica hot.
Conta três servidas
setInterval chama a função vezes sem conta, aqui a cada 300 milissegundos. Cada chamada soma um. Em 3, clearInterval para. O registo é esse 3, não uma subida sem fim.
let pot = document.getElementById("pot");
let n = 0;
let tick = setInterval(function () {
n = n + 1;
pot.textContent = String(n);
if (n === 3) {
clearInterval(tick);
console.log(pot.textContent);
}
}, 300);
O registo é 3. O id do intervalo é tick. Sem clearInterval a conta continuaria a subir.
O id é um número
O valor que setTimeout devolve é um número. Não é o atraso nem a palavra hot. Este trecho marca uma função vazia só para ler o tipo e depois cancela.
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);
O registo é number.
Zero continua a ser depois
Um atraso de 0 não quer dizer «antes da linha seguinte». A função espera este script acabar. A chaleira fica now, essa palavra é registada, e só então a função regista later.
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);
O primeiro registo é now. O segundo é later. O zero não furou a fila.
O que um atraso significa
A unidade é o milissegundo. A linha da chaleira é a que esta página usa.
📊 O que um atraso significa
| Atraso | Significa | Fácil de confundir |
|---|---|---|
| 0 | depois que este script acaba | antes da linha seguinte |
| 400 | 0,4 segundos | 400 segundos |
| 1000 | um segundo | um minuto |
A linha sob a chaleira
O script escreve cold e guarda essa palavra na hora. O prazo de 400 milissegundos guarda hot. O intervalo soma um a cada 300 milissegundos, para em 3 e junta as três palavras. hot é guardado antes da terceira servida, porque 400 é menor que 900.
<!DOCTYPE html>
<html>
<head>
<title>kettle-timer — page</title>
</head>
<body>
<p id="pot">blank</p>
<p id="line">…</p>
<script>
let pot = document.getElementById("pot");
let seen = [];
pot.textContent = "cold";
seen.push(pot.textContent);
setTimeout(function () {
pot.textContent = "hot";
seen.push("hot");
}, 400);
let n = 0;
let tick = setInterval(function () {
n = n + 1;
if (n === 3) {
clearInterval(tick);
seen.push(String(n));
document.getElementById("line").textContent = seen.join(" / ");
}
}, 300);
</script>
</body>
</html>
A linha é cold / hot / 3. Cold foi imediato. Hot veio do prazo. 3 veio do intervalo. A palavra blank sumiu. same / 4 / undefined / number é a página anterior.
No balcão
- Põe a chaleira em cold, marca hot para 400 milissegundos e regista na hora. O primeiro registo é cold. O seguinte é hot.
- Marca hot e chama
clearTimeoutantes de correr. O registo fica cold. - Conta com
setIntervale para em 3. O registo é 3. - Lê
typeofdo id. O registo é number. - Usa um atraso de 0. Os registos são now e depois later.
- Lê a linha da página: cold / hot / 3.
Erros no balcão
A chaleira mostra cold, hot ou uma conta. Não mostra a linha do sino.
- Esperar que o primeiro registo seja hot
- Esquecer
clearTimeout, e uma fervura que querias cancelar escreve hot - Deixar o intervalo passar de 3
- Ler 400 como 400 segundos
- Tomar um atraso de 0 como «antes da linha seguinte»
- Ler a linha como same / 4 / undefined / number
Fique com isto
- A linha seguinte corre antes da função do timeout
clearTimeoutlarga essa função e a chaleira fica coldclearIntervalpara a conta em 3- O id de
setTimeouté um número - Um atraso de 0 regista now antes de later
- A linha da página é cold / hot / 3
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo