How to start a bootstrap font rotation awesome icon and then stop it using jQuery

Question

I have the font awesome refresh icon on the webpage I'm working on.

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

When this icon is clicked, I want it to start spinning. I was able to accomplish this by typing the following in my JavaScript file:

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

I only need this icon to rotate for a couple of seconds. I tried adding this (below) to my JS file, but when I do, the icon does not rotate at all:

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

I also tried the following, which also does not work:

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

I also tried the following, but when I do this, the icon starts spinning, but does not stop:

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

I tried all of the above without my startup() function, and it gives the same results, so I'm sure this is not a function.

How do I return the FA refresh icon in just a second or two and then stop?

Answer 1

You should:

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

Because this was something else inside setTimeout(function(){ and did not point to an element with a click.

Working script

Processing CSS requests is not queued, but you can make it run in the "fx" queue by doing:

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

Working script

Answer 2

You cannot use the delay method in this case, because addClass does not return a queue interface for working with delay.

So you really should use setTimeout , but use the correct this value inside. The problem is that setTimeout will perform a callback function in the context of a global object ( this === window ). Therefore, you need to provide the proper context. For this, it is convenient to use the Function.prototype.bind method:

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

Answer 3

Do something like this (note: use setTimout instead of setInterval, my bad one) 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(); });