addClass不setTimeout函数

Question

demo

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

活动类应该500个ms后加入内工作，但它不添加不改变它的背景色。

Answer 1

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

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

Answer 2

您可以在一个变量保存$(this)，才能在setTimeout函数访问$(this)：

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

Updated Fiddle

Answer 3

使用proxy：

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

setTimeout函数中的“这”指的是window对象不是你点击，但使用代理“这个”定义你点击按钮的按钮。

demo

Answer 4

试试这个：

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

Working Fiddle