如何改善settimeout？ [复制]答案

【问题标题】：how to improve the settimeout? [duplicate]如何改善settimeout？ [复制]
【发布时间】：2022-01-25 12:40:38
【问题描述】：

为什么此代码中的 setTimeOut 不起作用？我想逐个显示子菜单，我不确定方法是否好，有人告诉我关闭有问题

代码：

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

【问题讨论】：

您的showone 呼叫和您的hideone 呼叫之间有0 毫秒。 setTimeout 是非阻塞的。预期的结果究竟是什么？见How do I add a delay in a JavaScript loop?。
如果不使用let i = 0，那么是的，闭包有问题。

标签： javascript css dom

【解决方案1】：

显示和隐藏的时间正在发生冲突。你可以试试 setTimeout(hideone, 3000); 而不是 setTimeout(hideone, 2000);

【讨论】：

【解决方案2】：

正如 cmets 中指出的那样，这不起作用，因为 div “同时”显示和隐藏，因此不会有任何可见的效果。

你可以用一个小辅助函数来解决这个问题，它会在 2 秒超时后解决一个承诺。让你的函数异步并等待它。

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>

【讨论】：

【解决方案3】：

请参考这里。它可能适用于您的情况。

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

【讨论】：

这样更好吗？这有所有相同的问题。