如何开始旋转引导字体可怕的图标，然后让它停止使用jQuery

Question

我有一个网页上的字体可怕的刷新图标，我正在工作。

<i class="fa fa-refresh fa-3x" id="lock-refresh"></i>

当这个图标被点击，我希望它开始旋转。我能够通过在我的JavaScript文件中输入以下内容来实现这一点：

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' ).

    //Below is a function that I need to run after the FA icon is clicked.
    startup();
});

不过，我只需要这个图标旋转几秒钟。我尝试将这个(下面)添加到我的JS文件中，但是当我这样做时，图标根本不会旋转：

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );

    //Trying to remove the class after 1000 milliseconds. Not working.
    $( this ).delay(1000).removeClass( 'fa-spin' );
    startup();
});

我还尝试了以下几种方法，但它们也不起作用：

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' ).delay(1000).removeClass( 'fa-spin' );
    startup();
});

我也尝试了以下方法，但当我这样做时，图标开始旋转，但不会停止：

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );

    //Trying to use setTimeout, but doesn't seem to work either.
    setTimeout(function() { $( this ).removeClass( 'fa-spin' ); }, 1000);
    startup();
});

在没有startup()函数的情况下，我尝试了以上所有的方法，并且它产生了相同的结果，所以我确信它不是这个函数。

如何才能让我的FA刷新图标旋转一两秒钟，然后停止？

Answer 1

你应该这样做：

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );
    var $el = $(this);
    setTimeout(function() { $el.removeClass( 'fa-spin' ); }, 1000);
    startup();
    // Whatever here.
});

因为this是setTimeout(function(){中的其他东西，没有指向单击的元素。

工频

查询的CSS操作没有排队，但可以在“fx”队列中执行，方法是：

 $( '#lock-refresh' ).click(function() {
        $(this).addClass("fa-spin").delay(1000).queue('fx', function() { $(this).removeClass('fa-spin'); });
        startup();
        // Whatever here.
 });

工频

Answer 2

在这种情况下，您不能使用delay方法，因为addClass不会返回队列接口来处理延迟。

因此，您确实应该使用setTimeout，但在内部使用正确的this值。问题是setTimeout将在全局对象(this === window)上下文中执行回调函数。所以你需要提供一个合适的背景。为此，可以方便地使用Function.prototype.bind方法：

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );
    setTimeout(function() { 
        $( this ).removeClass( 'fa-spin' ); 
    }.bind(this), 1000);
    startup();
});

Answer 3

这样做(注意:使用setTimout而不是setInterval，我的坏) https://jsfiddle.net/c7276oww/

$( '#lock-refresh' ).click(function() {
    $( this ).addClass( 'fa-spin' );
    setTimeout(function(){ $( '#lock-refresh' ).removeClass( 'fa-spin' ); }, 3000);
    //Below is a function that I need to run after the FA icon is clicked.
    startup();
});