如何在jS中执行函数队列执行

Question

我使用jQuery来简化框的隐藏和显示。例如，如果单击以隐藏一个框，它将隐藏所有框，但是只有那些不应该被隐藏的框会重新出现。随着显示，这有点困难。本应显示的框在其他框消失之前就已显示。因此，我添加了一个setTimeout函数，其时间限制为400ms（JQuery中的默认淡入/淡出时间）。

现在，除了一件小事情，代码可以正常运行。如果快速单击所有按钮，则框将排队消失。那是应该的。但是，如果您重复此过程（快速向后单击所有按钮以使所有按钮重新出现），则会出现故障。我在以下视频上复制了该过程：https://ctrlv.tv/video/2020/04/09/13/Ij9u.webm。 -您会看到消失看起来很平滑，但是重新出现看起来很糟糕。我认为这可能是由于setTimeout函数而发生的。

有什么办法解决这个问题？

function showhide(num) {
  if ($("#box" + num).css('display') == 'none') {
    $(".box").fadeOut();
    
    setTimeout(function() {
      $("#box" + num).removeClass("hidden");
      $(".box:not(.hidden)").fadeIn();
    }, 400);
  } else {
    $(".box").fadeOut();
    $("#box" + num).addClass("hidden");
    $(".box:not(.hidden)").fadeIn();
  }
}

html {
  width: 340px;
  border-style: solid;
}

.box {
  width: 100px;
  height: 100px;
  float: left;
}

#box1 { background-color: red; }
#box2 { background-color: blue; }
#box3 { background-color: green; }
#box4 { background-color: yellow; }
#box5 { background-color: orange; }
#box6 { background-color: purple; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<b>Hide/Show</b><br>

<button onclick="showhide(1)">Box 1</button>
<button onclick="showhide(2)">Box 2</button>
<button onclick="showhide(3)">Box 3</button>
<button onclick="showhide(4)">Box 4</button>
<button onclick="showhide(5)">Box 5</button>
<button onclick="showhide(6)">Box 6</button><br><br>

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>

jsFiddle

Answer 1