javascript - 恢复 Javascript/jQuery 中的 setTimeout 方法？

Question

因此元素 i 的 onClick:

  setTimeout(function() {
    $('.outline').toggleClass('card_active_first');
  }, 500);

  setTimeout(function() {
    $('.outline').toggleClass('card_active_first card_active');
    $('.info').toggleClass('fade_show');
    $('.info_1').toggleClass('fade_show');
    $('.info_types').toggleClass('fade_show');
  }, 1000);

这基本上是一个旋转 90 度的方框，然后删除并添加旋转 180 度的类。

CSS:

.card_active_first {
  transform: rotateY(90deg);
  transition: .3s ease-in-out;
  background: white!important;
}
.info_card_active {
  transform: rotateY(180deg);
  visibility: visible!important;
}

我的问题是:在最后的超时时间内，我隐藏了页面上的其他类(class)。我如何获得它，以便当我使用 onClick 再次将它们全部切换回来时，超时会触发，但会恢复，因此 card_active_first 和 card_active切换然后其他一切都会回来？

Answer 1

您应该能够通过将计时器包装在 if 语句中并更改切换顺序来做到这一点。只需检查 .outline 是否具有 card_active_first 类，如果有，则按一个顺序执行切换。如果不是，则反向执行。

这可能看起来像这样

//The outline element seems like it is used often enough to store in a variable
var $outline = $('.outline');

if($outline.hasClass('card_active_first'){

    setTimeout(function() {
        $outline.toggleClass('card_active_first');
    }, 500);

    setTimeout(function() {
        $outline.toggleClass('card_active_first card_active');
        $('.info').toggleClass('fade_show');
        $('.info_1').toggleClass('fade_show');
        $('.info_types').toggleClass('fade_show');
    }, 1000);

} else {

    setTimeout(function() {
        //Judging from the question, I'm guessing you want this line to run first?
        $outline.toggleClass('card_active_first card_active');

        //Followed by these lines?
        $('.info').toggleClass('fade_show');
        $('.info_1').toggleClass('fade_show');
        $('.info_types').toggleClass('fade_show');
    }, 500);

    setTimeout(function() {
       $outline.toggleClass('card_active_first');
    }, 1000);

}

此外，如果您愿意，我相信您可以将 3 个相似的切换组合成 1 行。所以这...

$('.info').toggleClass('fade_show');
$('.info_1').toggleClass('fade_show');
$('.info_types').toggleClass('fade_show');

变成这样...

$('.info, .info_1, .info_types').toggleClass('fade_show');