how to improve the settimeout?

Question

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);
            }
            }

There are 0 ms between your `showone` call and your `hideone` call. [`setTimeout`](//developer.mozilla.org/docs/Web/API/setTimeout) is non-blocking. What exactly is the expected result? See [How do I add a delay in a JavaScript loop?](/q/3583724/4642212). — Sebastian Simon, Dec 25 '21 at 13:43
If you don’t use `let i = 0`, then yes, there’s a problem in the closure. — Sebastian Simon, Dec 25 '21 at 14:00

score 1 · Answer 1 · answered Dec 25 '21 at 13:46

1

The time for showing and hiding is colliding. You can try setTimeout(hideone, 3000); instead of setTimeout(hideone, 2000);

answered Dec 25 '21 at 13:46

Palak Kharbanda

183
8

kevinSpaceyIsKeyserSöze · Answer 2 · 2021-12-25T14:01:14.717

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>

score -1 · Answer 3 · answered Dec 25 '21 at 13:58

-1

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);
     }
   }

answered Dec 25 '21 at 13:58

Sathik Basha

124
5

How is this better? This has all the same problems. – Sebastian Simon Dec 25 '21 at 14:00

how to improve the settimeout?

3 Answers3