addClass在setTimeout函数中不起作用

Question

demo

$('button').on('click',function(){
   setTimeout(function(){
      $(this).addClass('active');
   },500);
});

活动类应在500毫秒后添加，但不添加不会改变它的背景颜色。

Answer 1

this没有引用setTimeout（）处理程序中的单击按钮，你可以使用一个简单的闭包变量来保存对被点击元素的引用并在超时处理程序中使用它

$('button').on('click', function () {
    var $el = $(this);
    setTimeout(function () {
        $el.addClass('active');
    }, 500);
});

Answer 2

使用proxy：

$('button').on('click',function(){
   setTimeout($.proxy(function(){
      $(this).addClass('active');
   },this),500);
});

在setTimeout函数中'this'指的是窗口对象，而不是你点击的按钮，但使用代理，'this'定义了你点击的按钮。

demo

Answer 3

您可以将$(this)保存在变量中，以便访问$(this)函数中的setTimeout：

$('button').on('click',function(){
    var $this = $(this);
    setTimeout(function(){
        $this.addClass('active');
    },500);
});

<强> Updated Fiddle

Answer 4

试试这个：

$('button').on('click',function(){
 var that = $(this);
 setTimeout(function(){that.addClass('active');},500);
});

<强> Working Fiddle