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

我的問題是：最終的超時時間內我躲在我的頁面上的其他類。我如何得到它，所以當我用onClick超時觸發時，他們全部切換回來，但在恢復，所以card_active_first和card_active切換，然後一切都回來了？

Answer 1

您應該可以通過將定時器包裝在if語句中並更改切換順序來完成此操作。請檢查是否具有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');