Temporizadores
El hervidor es un párrafo, #pot. El script escribe cold. Aquí no hay formulario ni campana de la tienda.
Un temporizador no pausa el script. La línea siguiente corre al instante. La función corre después. Un plazo de 400 milisegundos escribe hot. Si lo cancelas, el hervidor sigue cold. Un intervalo cuenta 1, 2, 3 y se detiene. La línea queda cold / hot / 3.
No es la campana
La página anterior juntó same / 4 / undefined / number. Eran el documento, un var, un let y el tipo del ancho. Esta página no los lee. cold y hot son palabras que el temporizador escribe en el hervidor.
La pregunta nueva: ¿cuándo cambia la palabra?
La línea siguiente no espera
setTimeout pide una función y un retraso en milisegundos. 400 son cuatro décimas de segundo, no 400 segundos. El registro bajo la llamada corre primero, con el hervidor aún cold. La función escribe hot y lo registra después.
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);
El primer registro es cold. El posterior es hot. El script no se quedó sentado 400 milisegundos.
Cancela el hervor
setTimeout devuelve un id. clearTimeout con ese id descarta la función. El hervidor quedó en cold y hot no llega.
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);
El registro es cold. La función se descartó, así que el hervidor no pasa a hot.
Cuenta tres servicios
setInterval llama la función una y otra vez, aquí cada 300 milisegundos. Cada llamada suma uno. En 3, clearInterval lo para. El registro es ese 3, no una subida sin fin.
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);
El registro es 3. El id del intervalo es tick. Sin clearInterval la cuenta seguiría subiendo.
El id es un número
El valor que devuelve setTimeout es un número. No es el retraso ni la palabra hot. Este fragmento programa una función vacía solo para leer el tipo y luego la cancela.
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);
El registro es number.
Cero sigue siendo después
Un retraso de 0 no significa «antes de la línea siguiente». La función espera a que este script termine. El hervidor pasa a now, esa palabra se registra, y solo entonces la función registra later.
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);
El primer registro es now. El segundo es later. El cero no se saltó la cola.
Qué significa un retraso
La unidad es el milisegundo. La fila del hervidor es la que usa esta página.
📊 Qué significa un retraso
| Retraso | Significa | Fácil de confundir |
|---|---|---|
| 0 | después de que este script termine | antes de la línea siguiente |
| 400 | 0,4 segundos | 400 segundos |
| 1000 | un segundo | un minuto |
La línea bajo el hervidor
El script escribe cold y guarda esa palabra al instante. El plazo de 400 milisegundos guarda hot. El intervalo suma uno cada 300 milisegundos, para en 3 y luego une las tres palabras. hot se guarda antes del tercer servicio, porque 400 es 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>
La línea es cold / hot / 3. Cold fue inmediato. Hot vino del plazo. 3 vino del intervalo. La palabra blank ya no está. same / 4 / undefined / number es la página anterior.
En el mostrador
- Pon el hervidor en cold, programa hot para 400 milisegundos y registra al instante. El primer registro es cold. El posterior es hot.
- Programa hot y llama a
clearTimeoutantes de que corra. El registro se queda en cold. - Cuenta con
setIntervaly para en 3. El registro es 3. - Lee
typeofdel id. El registro es number. - Usa un retraso de 0. Los registros son now y luego later.
- Lee la línea de la página: cold / hot / 3.
Fallos en el mostrador
El hervidor muestra cold, hot o una cuenta. No muestra la línea de la campana.
- Esperar que el primer registro sea hot
- Olvidar
clearTimeout, y que un hervor que querías cancelar escriba hot - Dejar que el intervalo pase de 3
- Leer 400 como 400 segundos
- Tomar un retraso de 0 como «antes de la línea siguiente»
- Leer la línea como same / 4 / undefined / number
Quédate con esto
- La línea siguiente corre antes de la función del timeout
clearTimeoutdescarta esa función y el hervidor sigue coldclearIntervalpara la cuenta en 3- El id de
setTimeoutes un número - Un retraso de 0 registra now antes que later
- La línea de la página es cold / hot / 3
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior