jQuery-超時功能

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標簽“ playerLoaders”運行良好，但是tab-content-div並未刪除活動類，而是將其添加到活動標簽中。

如果我刪除了超時功能，則選項卡可以正常工作。

我究竟做錯了什么？

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);