點擊添加課程，然后延遲刪除課程

Question

我希望在按下按鈕時將一個班級添加到一個班級中，然后在幾秒鍾后刪除該班級。

到目前為止，我已經有了按下按鈕時添加類的代碼：

$( ".overlay-close-button" ).click(function() {
    $( ".icon_holder" ).addClass('magictime tinRightIn');
});

在單擊按鈕類“ overlay-close-button”后說2秒鍾后，從“ icon_holder”中刪除類“ magictime tinRightIn”的代碼是什么？

Answer 1

javascript中的setTimeout或setInterval可能會解決問題。 例如：

$( ".overlay-close-button" ).click(function() 
{
    // problem: $( ".icon_holder" ) selects multiple elements!!!
    $( ".icon_holder" ).addClass('magictime tinRightIn'); 

    setTimeout(function()
    {
        $( ".icon_holder" ).removeClass('magictime tinRightIn');

    }, 2000);
});

Answer 2

對@ymz答案進行略微修改。 如果用戶在2秒鍾內單擊，則可能要取消先前設置的“ setTimeout回調”。

var timeoutHandler = null;
$( ".overlay-close-button" ).click(function() 
{
    $( ".icon_holder" ).addClass('magictime tinRightIn'); 
    if (timeoutHandler) clearTimeout(timeoutHandler);

    timeoutHandler = setTimeout(function()
    {
        $( ".icon_holder" ).removeClass('magictime tinRightIn');

    }, 2000);
});

Answer 3

您可以使用setTimeout()來實現。

setTimeout(function() { 
   $( ".icon_holder" ).removeClass('magictime tinRightIn');
}, 2e3);