As I can stop a setTimeout , while it's running, I thought it was with clearTimeout , but it's not like that
window.addEventListener("DOMContentLoaded", main);
function main() {
var mano = document.getElementById("mano");
mano.style.left = document.body.scrollWidth-40 + "px";
mano.style.top = (document.body.scrollHeight-40) + "px";
mano.addEventListener("click",function(){
if(th) {
clearTimeout(th); // <- TERMINAR SET TIMEOUT
}
});
function titulohome() {
var title = document.getElementById("hometitle");
var msg_listos = [];
var astrocosmos = "Esta web se basará".split(''),
i = 0,
ac = astrocosmos.length;
/* ------------------------------ */
/* Titulo Bienvenido */
var titulo = "Bienvenido".split(''),
j = 0,
l = titulo.length;
var a = document.createElement("AUDIO");
a.src = "tc.mp3";
var veces = 0,
veces2 = 0;
var tiempoUsado = 0;
var conocimiento = "En un instrumento para mejorar el conocimiento en diferentes ciencias importantes.".split(''),
u = 0,
ul = conocimiento.length;
for (; j < l; j++) {
(function () {
var self = j;
a.autoplay = true;
a.load();
window.ab1 = a1;
var a1 = setTimeout(function () {
if (self == 9) a.pause();
title.innerHTML += titulo[self];
title.style.position = "absolute";
var actualW = title.clientWidth;
var actualH = title.clientHeight;
title.style.left = (document.body.offsetWidth - actualW) / 2 + "px";
title.style.top = (document.body.scrollHeight + 50 - actualH) / 2 + "px";
tiempoUsado += 100 * self;
var a2= setTimeout(function () {
veces += 1;
if (veces == 1) {
title.innerHTML = "";
}
/* ----------------------- */
/* Base */
for (; i < ac; i++) {
(function () {
var closure = i;
var a3 = setTimeout(function () {
a.play();
if (closure == astrocosmos.length - 1) {
a.pause();
}
var tiempo = (astrocosmos.length - 1) * 150;
var a4= setTimeout(function () {
veces2 += 1;
if (veces2 == 1) title.innerHTML = "";
/* -------------- Conocimiento --------------- */
for (; u < ul; u++) {
var v = 0;
(function () {
var t = u;
var a5 = setTimeout(function () {
a.play();
var tiempo2 = (conocimiento.length - 1) * 150;
var a6 = setTimeout(function () {
v += 1;
title.innerHTML = "";
if(v == 1) homeEsferas("acerca", 150, 200);
function homeEsferas(idd, x, y) {
var b = document.createElement("DIV");
b.id = idd;
b.style.borderRadius = "50%";
b.style.position = "absolute";
b.style.left = parseInt(x) + "px";
b.style.top = parseInt(y) + "px";
b.style.opacity = "0.75%";
b.setAttribute("style", "background-color:white;width:400px;height:300px");
document.body.appendChild(b);
}
}, tiempo2 * 1.15);
title.style.position = "absolute";
var actualW = title.clientWidth;
var actualH = title.clientHeight;
title.style.left = (document.body.offsetWidth - actualW) / 2 + "px";
title.style.top = (document.body.scrollHeight + 50 - actualH) / 2 + "px";
title.style.fontSize = "60px";
if (t == ul - 1) a.pause();
if (t >= 24) {
title.style.marginLeft += t * 2 + "px";
}
title.innerHTML += conocimiento[t];
}, 150 * t);
})();
}
/* ------------------------------------------- */
}, tiempo * 1.15); /* Borro el texto de base */
title.innerHTML += astrocosmos[closure]; /* Agrego el texto */
title.style.position = "absolute";
var actualW = title.clientWidth;
var actualH = title.clientHeight;
title.style.left = (document.body.offsetWidth - actualW) / 2 + "px";
title.style.top = (document.body.scrollHeight + 50 - actualH) / 2 + "px";
}, 150 * i);
})();
}
}, 5000 - tiempoUsado);
/* ----------------------- */
}, 150 * self);
})();
}
/* ----------------------------- */
}
var th = setTimeout(titulohome, 500);
}/* General */
body {
background-color: #000000;
margin-top: 50px;
}
#hometitle {
color: white;
font-size: 100px;
font-family: monospace;
}
#mano {
width: 30px;
height: 30px;
position: absolute;
}
/* ------- */
/* 1.0 - Menu de navegación */
#menu {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
position: fixed;
}
#menu li {
float: left;
min-width: calc(100%/5);
/* Cantidad de li */
}
#menu li:first-child a {
background-color: gray;
}
#menu li a {
background-color: black;
color: white;
display: block;
padding: 16px 16px 16px 16px;
text-align: center;
font-family: monospace;
text-decoration: none;
border-bottom: 2px solid white;
}
#menu li a:hover {
background-color: gray;
}
/* ------------------------- */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Astro cosmos</title>
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
<link href="main.css" type="text/css" rel="stylesheet">
<script type="application/javascript" src="home.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="home.html">Inicio</a></li>
<li><a href="maths.html">Matemáticas</a></li>
<li><a href="physics.html">Física</a></li>
<li><a href="computacion.html">Computación</a></li>
<li><a href="others.html">Otros</a></li>
</ul>
<img id="mano" src="https://vignette1.wikia.nocookie.net/mikadzuki/images/6/6c/Mano.png/revision/latest?cb=20140428125615&path-prefix=es" alt="Detener Inicio"\>
<i id="hometitle"></i>
</body>
</html>I thought it was this way but it did not work for me
In the first lines of the function main I try to stop the timeout when clicking on the image that is a hand