Jquery - 超时功能答案

【问题标题】：Jquery - TimeOut FunctionJquery - 超时功能
【发布时间】：2016-04-10 06:50:35
【问题描述】：

我正在尝试运行以下 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 "playerLoaders" 工作正常，但 tab-content-div 没有删除活动类，而是将其添加到活动选项卡中。

如果我删除 TimeOut 功能，选项卡就可以正常工作。

我做错了什么？

【问题讨论】：

您是否在等待 5 秒以查看情况是否发生变化？ .playLoaders 将在单击时更改...其他所有内容都等待 5 秒，然后运行 IF 它没有 .active 类。
尝试将超时功能放在if语句之后
你到底想做什么？
'this' 引用的是 setTimeout 上下文，而不是外部函数上下文。你应该做 var self = this;并在 setTimeout 函数中使用 self。

标签： javascript jquery html

【解决方案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);

【讨论】：

您好 carlosdubusm 感谢您的意见。问题是，知道当我单击时， .playerLoaders 会添加加载类，但没有其他任何反应。超时功能，没有被激活？
你试过用'self'代替'this'吗？你能发布一个关于这个问题的 jsfiddle 吗？
再次嗨@carlosdubusm 它实际上正在工作，我有一个“。”不应该有的地方 - 对不起！