why setTimeOut in this code doesn't work ? im tring to show submenus one by one , im not sure if the way is good , someone told me there is a problem in the closure
the code :
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);
}
}
The time for showing and hiding is colliding. You can try setTimeout(hideone, 3000); instead of setTimeout(hideone, 2000);
As pointet out in the comments this does not work because the div is shown and hidden "at the same time" so there wont be any visible effect.
You could solve this with a little helper function which resolves a promise after 2 seconds timeout. Make your function async and just await it.
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>Please refer this. It may works for your case.
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);
}
}