Come iniziare a ruotare un'icona impressionante di bootstrap, quindi bloccarla con jQuery

Question

Ho l'icona di aggiornamento impressionante di carattere su una pagina web su cui sto lavorando.

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

Quando si fa clic su questa icona, voglio che inizi a girare. Sono stato in grado di ottenere questo risultato inserendo il seguente nel mio file 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(); 
}); 

Ho solo bisogno di questa icona a girare per un paio di secondi, però. Ho cercato di aggiungere questo (sotto) per il mio file JS, ma quando faccio l'icona non girare affatto:

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

Ho anche provato il seguente, che non funziona così:

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

ho anche provato quanto segue, ma quando faccio questo l'icona inizia a girare, ma non si fermerà:

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

ho provato tutto quanto sopra, senza la mia funzione startup(), e produce gli stessi risultati quindi io sono sicuro che non è la funzione.

Come faccio a far ruotare l'icona di aggiornamento FA solo per un secondo o due, quindi interrompere?

Answer 1

Si dovrebbe fare:

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

Perché this era qualcos'altro dentro setTimeout(function(){ e non stava indicando l'elemento cliccato.

Working Fiddle

manipolazione CSS di query non è in coda, ma si può fare eseguita all'interno della coda 'fx' facendo:

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

Working Fiddle

Answer 2

In questo caso non è possibile utilizzare il metodo delay poiché addClass non restituisce l'interfaccia della coda per funzionare con ritardo.

Quindi è necessario utilizzare lo setTimeout ma utilizzare il valore corretto this all'interno. Il problema è che setTimeout eseguirà la funzione di callback nel contesto dell'oggetto globale (this === window). Quindi è necessario fornire un contesto appropriato. Per questo, è comodo da usare Function.prototype.bind metodo:

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

Answer 3

fare qualcosa del genere (nota : utilizzare setTimout anziché setInterval, il mio male) 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(); 
});