¿Qué es setTimeout en JavaScript?
¡Claro! Vamos a hablar de setTimeout en JavaScript de una forma clara y divertida, y después te doy 10 ejercicios que pueden hacer que lo entiendas bien y que incluso los niños de sexto de primaria puedan jugar con el código.
¿Qué es setTimeout en JavaScript?
Imagina que quieres que algo pase… pero no ahora mismo, sino después de un ratito. Por ejemplo, que un mensaje aparezca en pantalla después de 3 segundos, o que un dibujo empiece a moverse después de un tiempo.
setTimeout es una función que le dice a JavaScript:
"Oye, espera X milisegundos y luego haz esto que te digo."
Sintaxis básica
setTimeout(funcion, tiempoEnMilisegundos);
-
funcion: Es lo que quieres que pase después de esperar.
-
tiempoEnMilisegundos: Cuánto tiempo quieres esperar (1000 ms = 1 segundo).
Ejemplo rápido
setTimeout(() => {
alert("¡Hola! Esto apareció después de 2 segundos");
}, 2000); // 2000 milisegundos = 2 segundos
10 ejercicios divertidos y sencillos con setTimeout
1. Mensaje que aparece después de 5 segundos
setTimeout(() => {
console.log("¡Ya pasaron 5 segundos!");
}, 5000);
2. Cambiar el color del fondo después de 3 segundos
setTimeout(() => {
document.body.style.backgroundColor = "lightblue";
}, 3000);
3. Mostrar un emoji sonriente después de 2 segundos
setTimeout(() => {
document.body.innerHTML = "😊";
}, 2000);
4. Hacer que un texto aparezca poco a poco (tipo efecto máquina de escribir)
const texto = "Hola, soy un texto mágico...";
let i = 0;
function mostrarTexto() {
if(i < texto.length) {
document.body.innerHTML += texto[i];
i++;
setTimeout(mostrarTexto, 200);
}
}
mostrarTexto();
5. Ruleta que gira 3 segundos y luego se detiene (simulación sencilla)
<button id="ruletaBtn">Girar Ruleta</button>
<div id="ruleta" style="font-size: 50px;">🎡</div>
<script>
const ruleta = document.getElementById('ruleta');
const btn = document.getElementById('ruletaBtn');
btn.onclick = () => {
let angle = 0;
const interval = setInterval(() => {
angle += 20;
ruleta.style.transform = `rotate(${angle}deg)`;
}, 50);
setTimeout(() => {
clearInterval(interval);
alert("¡La ruleta se detuvo!");
}, 3000);
};
</script>
6. Aparecer y desaparecer un texto después de 4 segundos
const p = document.createElement("p");
p.textContent = "¡Mira, aparezco y desaparezco!";
document.body.appendChild(p);
setTimeout(() => {
p.style.display = "none";
}, 4000);
7. Contar hacia atrás del 5 al 1 con retraso (1 segundo entre números)
let num = 5;
function contar() {
if (num > 0) {
console.log(num);
num--;
setTimeout(contar, 1000);
} else {
console.log("¡Despegue!");
}
}
contar();
8. Cambiar la imagen de un dibujo después de 3 segundos
<img id="dibujo" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Antes" alt="Dibujo">
<script>
setTimeout(() => {
document.getElementById("dibujo").src = "https://via.placeholder.com/150/FF0000/FFFFFF?text=Después";
}, 3000);
</script>
9. Mostrar saludo diferente según la hora (espera 2 segundos para mostrar)
setTimeout(() => {
const hora = new Date().getHours();
if (hora < 12) {
alert("¡Buenos días!");
} else if (hora < 18) {
alert("¡Buenas tardes!");
} else {
alert("¡Buenas noches!");
}
}, 2000);
10. Jugar a “Simón dice”: mostrar un color, esperar y luego pedir que pulses un botón
<div id="colorBox" style="width: 100px; height: 100px;"></div>
<button id="boton" disabled>Pulsame cuando cambie el color</button>
<script>
const box = document.getElementById("colorBox");
const boton = document.getElementById("boton");
function simonDice() {
box.style.backgroundColor = "red";
setTimeout(() => {
box.style.backgroundColor = "green";
boton.disabled = false;
}, 2000);
}
boton.onclick = () => alert("¡Bien hecho!");
simonDice();
</script>
¿Qué tal? ¿Quieres que te ayude a hacer alguno con más detalles o con alguna idea especial?
¡Me encanta hacer que la programación sea divertida y sencilla! 🚀😄
Comentarios
Publicar un comentario