如何在 jS 中执行函数队列

Question

我使用 jQuery 来平滑隐藏和显示框。例如，如果您单击隐藏一个框，它将隐藏所有框，但只有不应该隐藏的框会重新出现。

显示它有点困难。应该显示的盒子在其他盒子消失之前就出现了。所以我添加了一个setTimeout函数，时间限制为400ms（默认淡出in/out时间在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

问题是因为您依赖元素上不存在的 .hidden class 来使淡入淡出起作用。一旦删除 class 元素就会重新出现。

您可以通过使用可以淡化 in/out 的容器包围 .box 元素来使逻辑更有效、更简单。在该淡入淡出的回调中，您可以 hide/show 相关框，然后再次淡入可见框。试试这个：

let $container = $('#box-container');

$('button').on('click', function() {
  var $target = $($(this).data('target'));
  
  $container.fadeOut(() => {
    $target.toggleClass("hidden");
    $container.fadeIn();
  });
});

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

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

.hidden { display: none; }

#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 data-target="#box1">Box 1</button>
<button data-target="#box2">Box 2</button>
<button data-target="#box3">Box 3</button>
<button data-target="#box4">Box 4</button>
<button data-target="#box5">Box 5</button>
<button data-target="#box6">Box 6</button><br><br>

<div id="box-container">
  <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>
</div>

另请注意不引人注目的事件处理程序的使用。内联 onX 属性不再是好的做法，应尽可能避免。

如何在 jS 中执行函数队列

How to make function queue executions in jS

javascript

jquery

jquery-animate