¿Por qué setTimeOut en este código no funciona? intento mostrar los submenús uno por uno, no estoy seguro si la forma es buena, alguien me dijo que hay un problema en el cierre
el código :
function changestyle(){ var els = document.getElementsByClassName("submenu"); for(var i = 0; i < els.length-1; i++) { const showone = function(){ els[i].style.display = 'block'; }; const hideone = function(){ els[i].style.display = 'none'; }; setTimeout(showone, 2000); setTimeout(hideone, 2000); } }El momento de mostrar y ocultar está chocando. Puedes probar setTimeout(hideone, 3000); en lugar de setTimeout(hideone, 2000);
Como se señala en los comentarios, esto no funciona porque el div se muestra y se oculta "al mismo tiempo", por lo que no habrá ningún efecto visible.
Puede resolver esto con una pequeña función de ayuda que resuelve una promesa después de 2 segundos de tiempo de espera. Haga que su función sea asíncrona y solo espérela.
const changestyle = async () => { var els = document.getElementsByClassName("submenu"); for(var i = 0; i < els.length; i++) { const showone = () => { els[i].style.display = 'block'; } const hideone =() => { els[i].style.display = 'none'; } showone(); await awaiter(); hideone(); await awaiter(); } } const awaiter = () => { return new Promise(resolve => { setTimeout(resolve, 2000); }); } changestyle() .submenu { width: 30px; height: 30px; background-color: blue; display: none; } <div class="submenu"></div> <div class="submenu"></div> <div class="submenu"></div>Consulte esto. Puede funcionar para su caso.
function changestyle(){ var els = document.getElementsByClassName("submenu"); for(var i = 0; i < els.length-1; i++) { els[i].style.display = 'block'; const hideone = function(){ els[i].style.display = 'none'; }; setTimeout(hideone, 2000); } }