Jak zacząć kręcić czcionką bootstrapu niesamowitą ikonę, a następnie zatrzymać ją za pomocą jQuery

Question

Mam odświeżoną ikonę czcionki na stronie, nad którą pracuję.

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

Po kliknięciu tej ikony chcę, aby zaczęła się obracać. Byłem w stanie to osiągnąć poprzez wprowadzenie następujących w moim pliku 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(); 
}); 

Muszę tylko tę ikonę, aby kręcić przez kilka sekund, choć. Próbowałem dodać to (poniżej) do mojego pliku JS, ale kiedy zrobić ikonę nie wiruje w ogóle:

$('#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(); 
}); 

Próbowałem zostały również następujące dane, które nie pracują, a także:

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

próbowałem zostały również następujące, ale kiedy robię to ikona zaczyna przędzenia ale nie zatrzyma:

$('#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(); 
}); 

próbowałem wszystkie powyższe bez mojego startup() funkcji i daje takie same wyniki, więc ja " Jestem pewien, że to nie jest funkcja.

W jaki sposób mogę odświeżyć ikonę odświeżania FA tylko na sekundę lub dwie, a następnie zatrzymać?

Answer 1

należy zrobić:

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

Ponieważ this było coś innego wewnątrz setTimeout(function(){ i nie wskazując klikniętego elementu.

Working Fiddle

manipulacja CSS kwerendy nie jest w kolejce, ale można zrobić to wykonywane wewnątrz kolejce 'fx', wykonując:

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

Working Fiddle

Answer 2

Nie można użyć metody delay w tym przypadku, ponieważ addClass nie zwraca interfejsu kolejki do pracy z opóźnieniem.

Powinieneś używać setTimeout, ale użyj wartości this w środku. Problem polega na tym, że setTimeout wykona funkcję zwrotną w kontekście globalnym (this === window). Musisz więc podać odpowiedni kontekst. Do tego jest to wygodne w użyciu Function.prototype.bind metody:

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

Answer 3

zrobić coś takiego (uwaga : użyj setTimout zamiast setInterval, my bad) 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(); 
});