Jquery - TimeOut函数

Question

我试图运行以下jQuery代码。

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

但有些事情做得不对 div-tag＆＃34; playerLoaders＆＃34;工作正常，但tab-content-div没有删除活动类，并将其添加到活动选项卡。

如果我删除TimeOut功能，标签工作正常。

我做错了什么？

Answer 1

在setTimeout函数中，'this'引用setTimeout上下文，而不是外部函数上下文。您应该获得对外部函数上下文的引用。考虑一下：

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

如果你想在setTimeout函数中继续使用'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);