En esta práctica de JavaScript he puesto en práctica el uso de la combinación de los métodos de control de tiempo setTimeout ( ) y clearTimeout ( ) en JavaScript.
El usuario observará cómo después de cinco segundos se eliminará automáticamente el párrafo existente en la página web. Y si pulsa en un botón determinado anulará el temporizador y no se eliminará dicho párrafo.
Para poder comprender el código de esta práctica es muy importante conocer el uso de los métodos setTimeout ( ) y clearTimeout ( ). Como ayuda puedes echarle un vistazo a los siguientes enlaces:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<p id="parrafo">Espere cinco segundos y se eliminará este párrafo.</p>
<p><button id="boton">Pulse aquí para anular el temporizador</button></p>
</body>
</html>Código CSS
* {
text-align: center;
}
#parrafo {
margin-top: 60px;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
temporizador();
document.getElementById("boton").addEventListener("click", anular, false);
}
let demora;
function anular() {
clearTimeout(demora);
}
function temporizador() {
demora = setTimeout(eliminar, 5000);
}
function eliminar() {
let parrafo = document.getElementById("parrafo");
parrafo.innerHTML = "";
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.