javascript - 如何同时执行计时？

Question

我现在正在使用 jquery 制作排序功能。

通过单击每个按钮，分配的内容将以缩放动画显示。但是，当一些排序按钮被快速点击时，一些内容显示的时间不对。

例如，如果在单击 btn-sort03 之后立即单击 btn-sortAll，则 sort03 的内容会出现得晚一些。我该如何修复它们？

$(function() {
  $('.sort-btn li').each(function() {
    $(this).click(function() {
      let btnname = $(this).attr("class").substring(4).toLowerCase();
      let classname = '.';
      classname += btnname; //. + btnname
      $('.sort-content > div').hide();

      setTimeout(function() { // to wait to hide, and to avoide first content appear quickly
        if (btnname == 'sortall') {
          $('.sort-content > div').fadeIn(500);
        } else {
          $('.sort-content div:not(classname)').hide();
          $(classname).fadeIn(500);
        }
      }, 100);

    });
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sort-btn {
  display: flex;
}

.sort-btn li {
  width: 100px;
  text-align: center;
  border: 1px solid #333;
}

.sort-content {
  display: flex;
  flex-wrap: wrap;
}

.sort-content>div {
  width: 32vw;
  margin: .5vw;
  background: #9ad0e4;
  animation: scale .8s ease-out;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  0% {
    transform: scale(.5);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sort-btn">
  <li class="btn-sort01">btn-sort01</li>
  <li class="btn-sort02">btn-sort02</li>
  <li class="btn-sort03">btn-sort03</li>
  <li class="btn-sortAll">btn-sortAll</li>
</ul>
<div class="sort-content">
  <div class="sort01">sort01</div>
  <div class="sort03">sort03<br>sort03<br>sort03</div>
  <div class="sort02">sort02</div>
  <div class="sort02">sort02<br>sort02<br>sort02<br>sort02</div>
  <div class="sort01">sort01<br>sort01<br>sort01<br>sort01<br>sort01</div>
  <div class="sort03">sort03<br>sort03</div>
  <div class="sort01">sort01</div>
  <div class="sort01">sort01<br>sort01<br>sort01<br>sort01</div>
  <div class="sort02">sort02<br>sort02</div>
  <div class="sort01">sort01<br>sort01</div>
  <div class="sort03">sort03</div>
</div>

Answer 1

您可以使用 .stop() .它有两个参数:第一个清除排队的动画(来自多次点击)，第二个结束它以开始下一个。将这两个选项设置为 true 并附加到 .fade() 之前的元素，如下例所示。

$(function() {
  $('.sort-btn li').each(function() {
    $(this).click(function() {
      let btnname = $(this).attr("class").substring(4).toLowerCase();
      let classname = '.';
      classname += btnname; //. + btnname
      $('.sort-content > div').hide();

      setTimeout(function() { // to wait to hide, and to avoide first content appear quickly
        if (btnname == 'sortall') {
          $('.sort-content > div').stop(true, true).fadeIn(500);
        } else {
          $('.sort-content div:not(classname)').hide();
          $(classname).stop(true, true).fadeIn(500);
        }
      }, 100);

    });
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sort-btn {
  display: flex;
}

.sort-btn li {
  width: 100px;
  text-align: center;
  border: 1px solid #333;
}

.sort-content {
  display: flex;
  flex-wrap: wrap;
}

.sort-content>div {
  width: 32vw;
  margin: .5vw;
  background: #9ad0e4;
  animation: scale .8s ease-out;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  0% {
    transform: scale(.5);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sort-btn">
  <li class="btn-sort01">btn-sort01</li>
  <li class="btn-sort02">btn-sort02</li>
  <li class="btn-sort03">btn-sort03</li>
  <li class="btn-sortAll">btn-sortAll</li>
</ul>
<div class="sort-content">
  <div class="sort01">sort01</div>
  <div class="sort03">sort03<br>sort03<br>sort03</div>
  <div class="sort02">sort02</div>
  <div class="sort02">sort02<br>sort02<br>sort02<br>sort02</div>
  <div class="sort01">sort01<br>sort01<br>sort01<br>sort01<br>sort01</div>
  <div class="sort03">sort03<br>sort03</div>
  <div class="sort01">sort01</div>
  <div class="sort01">sort01<br>sort01<br>sort01<br>sort01</div>
  <div class="sort02">sort02<br>sort02</div>
  <div class="sort01">sort01<br>sort01</div>
  <div class="sort03">sort03</div>
</div>