Jquery - TimeOut Function

Question

I'm trying to run the following jQuery Code.

$('body.player').find('.tab').click(function(){
      $('.playerLoaders').addClass('loading');

      setTimeout(function() {
            if( !$(this).hasClass('active') ){
                 $('.playerLoaders').removeClass('loading');
                 $('.tab-content[data-tab="' + $(this).attr('data-tab') + '"]').addClass('active').siblings().removeClass('active');
                 $(this).addClass('active').siblings().removeClass('active');
            }
            return false;
      },5000);
});

But something is not working quite right.
The div-tag "playerLoaders" is working perfectly, but the tab-content-div is not removing the active class, and adding it to the active tab.

If I delete the TimeOut-function, the tabs are working just fine.

What am I doing wrong?

Are you waiting 5 seconds to see if things change? .playLoaders will change on the click... everything else waits 5 seconds, then runs IF it doesn't have the .active class. — Scott
– Scott, Commented Apr 9, 2016 at 22:31
'this' is referencing the setTimeout context, and not the outer function context. You should do var self = this; and use self inside the setTimeout function. — carlosdubusm
– carlosdubusm, Commented Apr 9, 2016 at 22:48

carlosdubusm · Accepted Answer · 2016-04-09 22:50:35Z

1

Inside the setTimeout function, 'this' is referencing the setTimeout context, and not the outer function context. You should get a reference to the outer function context. Consider this:

$('body.player').find('.tab').click(function(){
      var self = this;
      $('.playerLoaders').addClass('loading');

      setTimeout(function() {
            if( !$(self).hasClass('active') ){
                 $('.playerLoaders').removeClass('loading');
                 $('.tab-content[data-tab="' + $(self).attr('data-tab') + '"]').addClass('active').siblings().removeClass('active');
                 $(self).addClass('active').siblings().removeClass('active');
            }
            return false;
      },5000);
});

If you want to keep using 'this' inside the setTimeout function, you can also bind it like this:

setTimeout((function() {
            if( !$(this).hasClass('active') ){
                 $('.playerLoaders').removeClass('loading');
                 $('.tab-content[data-tab="' + $(this).attr('data-tab') + '"]').addClass('active').siblings().removeClass('active');
                 $(this).addClass('active').siblings().removeClass('active');
            }
            return false;
}).bind(this),5000);

answered Apr 9, 2016 at 22:50

carlosdubusm

1,1034 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grillo Over a year ago

Hi carlosdubusm Thank you for the input. The problem is, that know when I click, the .playerLoaders gets the loading class added, but nothing else happens. The TimeOut function, doesn't get activated?

carlosdubusm Over a year ago

Did you try using 'self' instead of 'this'? Can you post a jsfiddle with the issue?

Grillo Over a year ago

Hi again @carlosdubusm It was actually working, I had a "." where there shouldn't be one - sorry for that!

Collectives™ on Stack Overflow

Jquery - TimeOut Function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related