点击添加课程，然后延迟删除课程

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);